4.1.2 breaks alignment of inline SVG icons

A new change in 4.1.2 causes inline SVG icons to become unaligned.

The code in question, /scss/_reboot.scss, line 277:

svg:not(:root) {
    overflow: hidden;
    vertical-align: middle; <--- (Line 277)
}

The issue can be seen in the following examples:
Version 4.1.1 (Icons aligned)
Version 4.1.2 (Icons not aligned)

Ah, yes, the selector is too strong and overrides classes.

Removing :not(:root) and overflow: hidden; is a solution?

svg {
  vertical-align: middle;
}

Because,

svg:not(:root) {	
  overflow: hidden;	
}

is for IE9, so we can remove it.
ref: necolas/normalize.css@004d58b#diff-04c6e90faac2675aa89e2176d2eec7d8L73

And...

svg:not(:root) {
  vertical-align: middle;
}

SVG can be the root element, but I'm not sure you need :not(:root). Even if that is the root, I don't think that vertical-align: middle will cause something.

@ysds

Yup, I agree with that. Feel free to open a PR @ysds, or I can later this week. Hoping to do a 4.1.3 next week to fix some issues.

@mdo

@mdo sure. Which is preferred?

img {
  vertical-align: middle;
  border-style: none; // Remove the border on images inside links in IE 10-.
}

svg {
  vertical-align: middle;
}

or

img, svg {
  vertical-align: middle;
}

img {
  border-style: none; // Remove the border on images inside links in IE 10-.
}

I would say option 1?

@XhmikosR

I found @XhmikosR 's comment #26296 (comment) and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7226597/.

Unfortunately, that bug still exists in IE11. I don't have a environment to test with IE10.

https://codepen.io/anon/pen/pZNaqN

@ysds

@ysds

is for IE9, so we can remove it.

It is not only for IE9, it is necessary for all IE versions.

@Herst

@Herst Looks like it :)

@ysds

Is there any reason why we add :not(:root)? We can just leave that out and specificity problem is solved? Just add overflow: hidden to all svg? And as @ysds pointed out:

SVG can be the root element, but I'm not sure you need :not(:root). Even if that is the root, I don't think that vertical-align: middle will cause something.

This demo works in IE10 and IE11: https://codepen.io/MartijnCuppens/pen/QBGoKd?editors=1100

@mdo

Is there any reason why we add :not(:root)?

Yeah, I have the same doubt. I can not imagine the scenario where Bootstrap is used in SVG documents. like:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url(bootstrap.css);
  </style>
  <rect .../>
</svg>

ref: https://www.w3.org/TR/SVG2/styling.html#LinkElement

or

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    /*!
     * Bootstrap v4.1.2 (https://getbootstrap.com/)
     ...*/
  </style>
  <rect .../>
</svg>

@mdo Do you expect any usage that Bootstrap is used in SVG documents? If not, the :not(:root) could be remove. It is not necessary to verify and waste time.

Definitely don't expect that usage :).

@mdo

@mdo thanks :) I’m going to update my PR.

Remove `:not(:root)` from the workaround for SVG overflow bug

Navigation Menu

Repository navigation

4.1.2 breaks alignment of inline SVG icons #26878

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

4.1.2 breaks alignment of inline SVG icons #26878

Description

Activity

mdo commented on Jul 14, 2018

ysds commented on Jul 18, 2018

mdo commented on Jul 18, 2018

ysds commented on Jul 18, 2018

MartijnCuppens commented on Jul 18, 2018

ysds commented on Jul 20, 2018

Herst commented on Jul 20, 2018

ysds commented on Jul 20, 2018

MartijnCuppens commented on Jul 20, 2018

ysds commented on Jul 20, 2018

mdo commented on Jul 20, 2018

ysds commented on Jul 20, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions