Popper-core: Blurry text in IE11

[franciscolourenco]

Caused by translate3d. Using translate fixes the problem. Any drawbacks?

[FezVrasta]

You can fallback to 'top' 'left' setting 'gpuAcceleration' to false

[franciscolourenco]

What do you think about having an option to do this automatically in browsers which have blurry text?

[kumarharsh]

@FezVrasta would there be a way to fallback to using 'top','left' in IE?

Since changing translate3d to the 2d flavour, translate, would make it work for IE, and still keep the functionality intact for other browsers, the reason to stick with translate3d is GPU acceleration since the translateZ is anyways hardcoded to be 0 here: https://github.com/FezVrasta/popper.js/blob/832cb78b7075940d9131699e2f438712c52f9947/packages/popper/src/modifiers/computeStyle.js#L77. So, even though IE has both gpuAcceleration and transform3d support, the final rendering sucks :-(

For reference, this has been an issue with other libraries also, and angular/material chose to use the 2d flavour.

[FezVrasta]

You can simply do something like this:

function isIE() { /* something to know if you are on IE */ }
new Popper({
  gpuAcceleration: !isIE()
});

[kumarharsh]

Yes, that's what I did. Was just wondering would it be something which could be rolled into popper itself, if possible? I can submit a PR if you deem it to be within the scope of the popper library.

[FezVrasta]

I'm trying to stop the lib from growing too much, and IE doesn't look like a good candidate for letting it grow more...

Also, the workaround is pretty straightforward so I don't think it's needed in the core.

[kumarharsh]

Yes, that makes sense.

I found a simple fix though - we'd just need to add this line to the library:

// in popper.js/packages/popper/src/modifiers/computeStyle.js
L77: styles[prefixedProperty] = `translate3d(${left}px, ${top}px, 0)`; 
L78: styles['-ms-transform'] = `translate(${left}px, ${top}px)`; 

This would target only IE10 and IE11, and not Edge or any other browser. Since there is already specific code for IE10 detection, I hoped this might be a small-enough change to warrant inclusion.