Incorrect vertical alignment of icons in Safari 11 while using Bootstrap 4

[kniziol]

Incorrect behavior

Take a look at vertical alignment of icons:

Correct behavior

Icons should be aligned as shown here:

Versions

• Bootstrap: v4.1.2
• Safari: 11.1.2

Source of problem

Property vertical-align: middle; of element svg:not(:root):

// node_modules/bootstrap/scss/_reboot.scss

svg:not(:root) {
  overflow: hidden; // Hide the overflow in IE
  vertical-align: middle; // <------------------ Here 
}

Temporarily solution

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

Question

Is there better solution? :)

[fabpot]

That's already been fixed in Symfony itself.. Thanks for reporting.

On 17 Jul 2018, at 23:58, Krzysztof Nizioł notifications@github.com wrote:

Incorrect behavior

Take a look at vertical alignment of icons:

Correct behavior

Icons should be aligned as shown here:

Versions

Bootstrap: v4.1.2 Safari: 11.1.2 Source of problem

Property vertical-align: middle; of element svg:not(:root):

// node_modules/bootstrap/scss/_reboot.scss

svg:not(:root) { overflow: hidden; // Hide the overflow in IE vertical-align: middle; // <------------------ Here } Temporarily solution

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

Is there better solution? :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kniziol]

Which version? In Symfony 4.1.1 is not fixed.