IE11 Layer Text Alignment Problem inside Bootstrap Dropdown

[claytonrumley]

Describe the problem

Hi guys...thanks for the great work on FA5!

We have a layered icon in a bootstrap dropdown item. It looks great in all browsers except IE11, where the transform style on the text layer is calculated strangely, compared to other browsers or outside the dropdown in IE. In our case instead of the text being centered at the bottom of the icon it's appearing outside the icon, below it and along the right edge.

Layered icons outside the dropdown menu look perfectly fine in IE.

I searched github but couldn't find a similar-sounding report; I apologize if this is a duplicate.

What did you expect?

I'd expect it to look the same inside or outside the dropdown menu.

What version and implementation are you using?

Version: Font Awesome Pro 5.0.8 Browser and version: Internet Explorer 11

• [X] SVG with JS

Reproducible test case

Here's the codepen

I've checked FF, Edge, and Chrome in Windows 10 and it looks fine. IE11 is the only one with the problem. Don't have Safari to test.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and for reporting this.

I can confirm the issue.

I've investigated, and there is some calculation going wrong.

Maybe something is going wrong here when elements are inside a position:absolute container: https://github.com/FortAwesome/Font-Awesome/blob/master/svg-with-js/js/fontawesome.js#L1257

IE11: fa-layers-text's transform property

Outside the dropdown

translate(-0.241563em, -0.5625em) scale(0.5) rotate(0deg)

Inside the dropdown

translate(0em, 0.1875em) scale(0.5) rotate(0deg)
          ^^^

Chrome 65: fa-layers-text's transform property

Outside the dropdown

translate(calc(-50% + 0em), calc(-50% + 0.1875em)) scale(0.5, 0.5) rotate(0deg)

Inside the dropdown

translate(calc(-50% + 0em), calc(-50% + 0.1875em)) scale(0.5, 0.5) rotate(0deg)

Let's assign to @robmadole

@robmadole if you know what is going wrong it's fine, otherwise let me know I can take a deeper look

[robmadole]

We do use calculation in IE because it doesn't support calc. I've tested Safari and it works fine too.

So this is certainly an IE issue. I'm not sure what the root cause is but we'll get this in the bug list.

[tagliala]

@robmadole I think that the issue could be caused by the fact that the element is initially not visible.

I think that this could also affect all browser without calc

Reduced test case: https://jsfiddle.net/tagliala/qu83xrwp/63/

PS: isn't this the calc property used? I can see IE10+ https://caniuse.com/#feat=calc

[shawnphoffman]

It's definitely an IE issue and I think it has to do with some of the IS_IE calculations being performed. Specifically, the issue arises with the transform property.

Currently, the inline style on the span.fa-layers-text comes out with the following CSS transform:

transform: translate(-8em, -8em) scale(0.25) rotate(0deg)

This ends up shooting the text way off from where it is intended to be.

Manually switching the CSS over to the following seems to get it a little bit closer so I wonder if it would handle it better to take the value being applied to the em, if any x/y transforms are applied then plus/minus those, the divide the result by the UNITS_IN_GRID property and using that as a percentage.

transform: translate(-50%, -50%) scale(0.25) rotate(0deg)

With a transform of { y: 2 } then you would end up with the following (accurate for my use case):

transform: translate(-50%, -37.5%) scale(0.25) rotate(0deg)

Note: These are all back of the napkin calculations that don't account for everything obviously...

[shawnphoffman]

@robmadole - I ended up forking fontawesome-svg-core to add this change. Doing so I was able to get it working correctly in IE.

Inside function transformForCss

if (startCentered && IS_IE) {
    // val += 'translate(' + (transform.x / d - width / 2) + 'em, ' + (transform.y / d - height / 2) + 'em) ';
    val += 'translate(' + (((transform.x / d - width / 2) + transform.x) / UNITS_IN_GRID) * 100 + '%, ' + (((transform.y / d - height / 2) + transform.y) / UNITS_IN_GRID) * 100 + '%) ';
}

[jahumes]

Any update on this?