Blurry text in Bootstrap dropdown menu

[Sir-Genius]

By default popper.js uses the CSS 3d transformation for positioning of dropdown menu. This transform property causes font rendering issues in WebKit-based browsers. It would be nice to add native popper.js option computeStyle.gpuAcceleration into Bootstrap dropdown plugin to allow users to choose which type of positioning to use.

[FezVrasta]

Why you say it causes issues in webkit browsers? It doesn't cause any issue if the 3d transformation doesn't make use of half pixels (Popper.js makes sure to not use half pixels).

May you provide more info about your browser and OS?

[Sir-Genius]

FezVrasta, thank you for the comment.

OS Windows 10. Browser Chrome 60.0.3112.101.
Compare these screenshots:

1. https://prnt.sc/gb785b (with transform).
2. https://prnt.sc/gb78mp (without transform and will-change).

As you can see, the text looks a bit blurry in the first example.

[FezVrasta]

The pictures have very low quality so they actually look the same to me, any chance to get a CodePen or JSFiddle to reproduce the problem?

[Sir-Genius]

Take a look here http://sergius.16mb.com (Google map toolbar). Both transform and will-change affect type rendering.

[Herst]

If I see it correctly greyscale anti-aliasing is used in one screenshot while subpixel anti-aliasing is used in the other one.

AFAIR, various browsers can have various reasons for switching to grayscale AA, e.g. transparent background, subpixel positioning, recent repositioning or other transformations, …

[FezVrasta]

I don't see anything blurred both on macOS and Windows 10 actually

[Herst]

@FezVrasta On high DPI setups you might not notice the difference, because if the pixels are very small it makes no difference whether full or subpixels are used for AA.

[atomiks]

@Herst is correct, the "ClearType" Windows uses is being disabled. You need to zoom right in to see the difference in anti-aliasing.

Left = with transform, right = without in his screenshots.

[FezVrasta]

They are just two different kind of anti aliasing, but neither of them looks blurry

May you try to set -webkit-font-smoothing: antialiased; or -webkit-font-smoothing: subpixel-antialiased; to the popper element and see if it helps?

[Herst]

neither of them looks blurry

This is subjective.

[bardiharborow]

Ref #21132 from the days of Tether.

[FezVrasta]

Still waiting for feedbacks on this:
#23590 (comment)

if it works I can fix this on Popper.js side of things.

[Sir-Genius]

May you try to set -webkit-font-smoothing: antialiased; or -webkit-font-smoothing: subpixel-antialiased; to the popper element and see if it helps?

It was the first thing that came to my mind, but unfortunately it doesn't help.

[atomiks]

Given this may not be fixable, a gpuAcceleration option would help fix this for the affected platforms.

If the device's pixel ratio is below 1.5 and is a Windows device, set the option to false.

$('#element').popover({
  gpuAcceleration: !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
})

[Sahil1111]

Please have a look to the attached screenshot attached screenshot are from bootstrap 4 main website

[XhmikosR]

Is this still an issue?

[Sir-Genius]

No, it is not. Now there is a built-in option which allows users to disable Popper.js.

[owensco]

I'm having this issue with tooltips. How exactly can I resolve this? Disabling popper.js gpu acceleration?

edit: removing transform: translate3d() fixes the blur but breaks positioning...

[FezVrasta]

You can disable gpu acceleration, right

[owensco]

@FezVrasta terribly sorry to bother you with such trivial matters, but could you provide a snippet of how to do this? (inside .js file)

[FezVrasta]

Actually I don't use Bootstrap anymore (it's been few years already) so I'm not able to help unfortunately.

[mindswoosh]

It seems like Chrome is a moving target for this. Following the idea of using transform, I got the left-side (grey-scale) of @atomiks example to work using transform: rotateY(0); Fontawesome icons, when colored using something other than black or grey, look terrible when antialiasing occurs with multiple colors. Using the transform, all the antialiasing is done in the same color as the icon. So for green icons, everything is done in green as opposed to adding orangish and blueish pixels in the mix.