0

I am using Bootstrap 4. But when opening the dropdown component the font color is slightly changed.

After looking for some color definitions which could be the problem (there aren't) I found something strange: when I disable the transform and the will-change property of the dropdown element, somehow the font-color is affected. See video here: https://www.dropbox.com/s/xkhl4m6enwvdzcd/Video%20color%20bug.mov?dl=0

It's most noticeable in Google Chrome and on a Cinema Display (Video).

Also it seems the subpixel font rendering is affected: see screenshot here . The fun thing: the font-color is rendered more accurately when it's off.

In Safari a font rendering issue also occurs ...

Any idea what is happening here?

(I can post a Code Pen, or see the id of it in the video.)

anbecode
  • 3
  • 2
  • Code pen is https://codepen.io/anon/pen/mBjBvg – anbecode Oct 12 '17 at 14:16
  • As far I know, `transform` and `will-change` can make the browser use GPU to render (instead of CPU), which is better for animation etc. But couldn't see a color changing in your examples. What do you mean by color changing? `color` property? How slightly is it changing? – giovannipds Oct 12 '17 at 15:05
  • 1
    The font color appearing different is a result of the absence of subpixel rendering, and subpixel rendering disappears because the element is rendered via separate composite layer (i.e. rendered om the GPU, as mentioned above). I don't know the way to "turn on" the subpixel rendering back for such element. – Ilya Streltsyn Oct 12 '17 at 15:22
  • 1
    @giovannipds In the video look at the text in the box in bottom left corner. The blue is glowing when "will-change" is active. The video quality is not that good, but when viewed "live" on Chrome & Cinema Display its quite disturbing. – anbecode Oct 13 '17 at 07:35
  • 1
    giovannipds and @ilya-streltsyn: Thanks for the explanation. At least now I know... Cheers! I also found out that on other displays it's almost not noticeable, only in a screenshot, where you can see the subpixel-rendering being off. – anbecode Oct 13 '17 at 07:49
  • @anbecode you're welcome. Do not forget to accept [BoltClock's answer below](https://stackoverflow.com/a/46725330/842768) if we've already answered this. – giovannipds Oct 14 '17 at 18:27

1 Answers1

2

As Ilya Streltsyn and giovannipds have mentioned in the comments here and here, that's a normal side effect of alpha compositing (subpixel rendering), which is what the browser does as part of hardware-accelerated rendering (GPU) brought about by will-change and transform.

giovannipds
  • 2,860
  • 2
  • 31
  • 39
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356