Bootstrap site: right-hand navigation text becomes rasterized after scrolling

[mg1075]

In the bootstrap site (e.g., http://getbootstrap.com/javascript/), the side navigation text looks "clean" prior to scrolling:

Yet after scrolling down, the side navigation text looks rasterized.

This is on a Windows 7 machine, using Chrome 35.0.1916.153 m.

Any insight as to why this is happening?

[mdo]

This is probably because of the 3d translate we use to reduce repaints. From #13410.

/cc @ItsJonQ

[ItsJonQ]

Hey all,

Ah! @mdo I think that the translate3d caused the problem. Since I work off a Mac, I totally forgot that translate affect how text render - especially on a Windows machine.

We can remove the changes if you think it's for the better.

:)

[hnrch02]

Wouldn't backface-visibility: hidden fix this?

[mg1075]

...FWIW

The scenario where I first came across this issue was after applying a box-shadow
to a fixed navbar.

Original navbar without shadow:

Altered navbar with box-shadow applied and text appearance altered:

[mdo]

@hnrch02 I don't see any difference on my Windows VMs, but it's difficult to given the shoddy resolution features there.

Anyone with a native Windows machine able to verify the original problem and the backface-visibility: hidden fix?

[mdo]

I can clearly reproduce this in IE11, but none of the expected features fix it. Apparently it's a bug in IE11 that hasn't been fixed, but I can't find anything super conclusive on that.

For now though, I'm fine punting.

[cvrebert]

@mdo So, should we try submitting Chrome and/or IE11 bugs about this?

[mdo]

Maybe? I'm burnt out on opening bugs, so if you like, yeah :D.

Also, I constantly forget where/how to file bugs for each browser. Can we add some links to our docs?