Bootstrap: [v4] Popovers looked blurred.

[LittleboyHarry]

BS v4 popovers looked so indistinct in my browser.

It happened because the css property code translateZ(0px).

I'm not sure whether it will influence , which I has opened system DPI on win10.
My browser is Vivaldi 1.9.818.49.

[patrickhlauke]

This looks like a bug with Vivaldi's implementation to me. Could you confirm if this happens in any other browsers on your particular system/setup?

[LittleboyHarry]

@patrickhlauke :

It still happened in my Chrome(56.0.2924.87) unless I closed win10 scaled DPI setting or remove the property ''translateZ".

[patrickhlauke]

This appears to be a bug in Chromium/Blink's hardware accelerated rendering in situations when Windows is scaled/not 100%.

[mdo]

Is this fixable or a won't fix?

[mdewaelebe]

I'm experiencing the same issue on Windows 10, IE 11 (11.413.15063.0) with scale set to 100%.
It renders fine in Chrome, Firefox.
Removing the 'translateZ' property also removes the blur from text in the popover.

I'm loading following files:

• jquery-3.1.1.slim.min.js
• 1.4.0 tether.min.js
• 4.0.0-alpha.6 bootstrap.min.js

[patrickhlauke]

Is this fixable or a won't fix?

@mdo as mentioned, removing the translateZ would remove the blur. I assume the Z translation is there to try and coax hardware acceleration / creating a new accelerated layer. So this will be the trade-off, but as popovers etc aren't really heavily animated, one that we can likely live with without much of a noticeable perf hit.

[speller]

@patrickhlauke do you have any workaround to prevent popovers blurring? There are a lot of users with system scale more than 100% and Chrome. As all bootstrap developers will bring this bug to their users I think bootstrap team should provide a solution but not just rely on browser bugs.

[XhmikosR]

Is this still an issue with the latest Chrome?

This is what I get on Windows 10 with a DPI of 175%:

Chrome 61.0.3163.100:

Firefox v57 beta:

[nip3o]

I experience the same issue on Chrome 64 on OS X, but only on some screens and on some zoom levels. I suppose this bug only occurs for certain combinations of screen resolution and zoom levels (which I believe is since those parameters makes the elements map differently to physical pixels).

[Herst]

@patrickhlauke wrote:

removing the translateZ would remove the blur. I assume the Z translation is there to try and coax hardware acceleration / creating a new accelerated layer.

Would there be any reason not to make it a setting?

[amokrushin]

@Herst there is a setting:

import Popper from 'popper.js';

// see: https://github.com/twbs/bootstrap/issues/23590
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

From #23590

[jhoanborges]

@amokrushin it works

[ghost]

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

It first looked great, it works to fix blurriness, but as soon as I apply setting you metioned or just set it to false - with each scroll of the page popup gets wider. What help is

23378 @logolevel comment:

Popper.Defaults.modifiers.computeStyle.enabled = false;

[mackcoding]

I can confirm I am having the same issue with the latest (as of Oct 30, 2018) frameworks that I am seeing blurry text in Chrome (ver 70) but not Firefox.

Removing this line in dev console fixes the issue but breaks the pop up (moves to opposite side of screen):

Here is a screenshot from Firefox:

Hopefully this can get fixed.

[ghost]

@mackcoding It looks to me that you're having this issue not with a popover, but with a blurred dropdown. If that assumtion is correct, please note - bootstrap uses popover.js for dynamic positioning of the dropdown. To make it static Bootstrap v4.1.X introduces paramter you can apply to dropwon - data-display="static" - this should fix dropdown bluriness.
Example:

<div class="dropdown">
  <button id="dLabel" type="button" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

P.S. I couldn't find the same for the Bootstrap 4.0, although documentation states

Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.

applying data-boundary="window" doesn't set position to static.

[rboughani]

i have the same problem, the first clic to open the popover don't get position correctly (transform: translate3d not set correclty) !
https://www.afnay.com/images/BUG.PNG

[ko06]

I am having the same problem... looks good in mac chrome and blurred in windows

[FezVrasta]

This should be fixed as soon Bootstrap upgrades to Popper 2, we released the first RC yesterday

[azhard4int]

@FezVrasta Has this issue fixed in the latest release, we tried checking it and it still appears Blurry!

[DLLluoluo]

Reasons for blurring There are elements in translate3d (x, y, z) whose height and width are odd, and 0.5px will appear. As a result, the browser cannot render properly.

This problem still exists, is there any good way to solve it?

[FezVrasta]

You can either disable the GPU acceleration by setting the default options explained here or wait for Bootstrap to upgrade to Popper 2.

[DLLluoluo]

You can either disable the GPU acceleration by setting the default options explained here or wait for Bootstrap to upgrade to Popper 2.

I introduced the bootstrap.bundle.js file in the form of a script tag to use the features of bootstrap. What should I do to solve the vague problem?

[DLLluoluo]

@Herst there is a setting:

import Popper from 'popper.js';

// see: https://github.com/twbs/bootstrap/issues/23590
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

From #23590

@Herst there is a setting:

import Popper from 'popper.js';

// see: https://github.com/twbs/bootstrap/issues/23590
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

From #23590

I introduced the bootstrap.bundle.js file in the form of a script tag to use the features of bootstrap. What should I do to solve the vague problem?

[tym]

Would like to see this feature implemented as well. A simple passthrough of the modifier would make lives so much easier.

https://popper.js.org/docs/v2/modifiers/compute-styles/#gpuacceleration

[DLLluoluo]

还要看到实现此功能。修饰符的简单传递将使生活变得更加轻松。

https://popper.js.org/docs/v2/modifiers/compute-styles/#gpuacceleration

Thank you very much for your suggestions. I found the gpuAcceleration parameter in the bootstrap.bundle.js file, set it to false, disable GUP acceleration, and Popovers became clear.

[akinuri]

还要看到实现此功能。修饰符的简单传递将使生活变得更加轻松。
https://popper.js.org/docs/v2/modifiers/compute-styles/#gpuacceleration

Thank you very much for your suggestions. I found the gpuAcceleration parameter in the bootstrap.bundle.js file, set it to false, disable GUP acceleration, and Popovers became clear.

Same. I changed gpuAcceleration:!0 to gpuAcceleration:false in bootstrap.bundle.min.js.

[mdo]

@XhmikosR @Johann-S Is it possible to update v4 and v5 to Popper 2? Do we have an idea of the amount of work that'd take for either version, let alone both?

In the mean time, we should also entertain a docs update to mention the GPU option here.

[XhmikosR]

For v5 it can be done for sure. For v4, I don't think we should go down this road since popper.js doesn't work on IE without polyfills. See also #29842.

[Doomsdaybutton]

How do you remove the translateZ() though?
Also: In my case it's translate3d()

It works when I open google chrome developer tools and uncheck the transform property but transform: none; doesn't seem to do the trick.
Edit: I use a CDN for the javascript... do I need to download the actual code?

[Schmaga]

How do you remove the translateZ() though?
Also: In my case it's translate3d()

It works when I open google chrome developer tools and uncheck the transform property but transform: none; doesn't seem to do the trick.
Edit: I use a CDN for the javascript... do I need to download the actual code?

Can confirm that the blurry text bug is also still there with latest bootstrap library (4.4.1) and using ng-bootstrap 6.x in Angular.

But using a global style like this fixes it for me (the !important was necessary in my case):

ngb-popover-window {
  will-change: unset !important;
}

It does slightly change the look of the popover arrow and border, but at least it does not hurt the eyes anymore :)

[XhmikosR]

30811 was merged.