739534 - Webfont text of container with box-shadow and position:fixed gets weird colours

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[Michal Čaplygin [:myf]]

Attachment: Example page using google webfont service

Tested on Windows XP Firefox stable 10+ and Nightly 13+

Under very special circumstances web font gets seemingly improper sub-pixel anti aliasing.
Conditions required:
- web font used
- position: fixed
- top position less or equal 0.00833333330px
- left position less or equal 0.4916666597127914px
- box-shadow width greater or equal 0.358333304524421730px

Spotted on the top menu of www.lycos.com on 2012-Q1

Comment 1

[Michal Čaplygin [:myf]]

Attachment: rendered content of attached html

Comment 2

[Michal Čaplygin [:myf]]

Just for record, issue really does not occur in Windows 7 / Vista

Comment 3

[Michal Čaplygin [:myf]]

Still present in stable 12.
Not present in Nightly 15.0a1 from probably some around 2012-05-28.

Comment 4

[Georgi]

I've just updated to version 12 and to some websites I'm working on appear the same.

All texts and links inside fixed positioned menus with Open Sans webfont from Google, are almost unreadable. But this is only if the mouse is not over the menu... Once the cursor is over, everything is fine.
In this case, if deactivate the fixed position, everything is fine. But also, if the body element contain line-height (1.3em in my css), happen the same. In this case, if deactivated, everything is working good and the texts are readable even with position fixed.

Another scenario is with different website and different webfont. There I use Alegreya SC and everything is looking good.

Hope this information helps somehow.

Comment 5

[Bob Tako]

I have the same issue in version 17.0.1. Basically, the fonts don't appear as clear as when the box-shadow is disabled. Disabling position:fixed and keeping the box-shadow also clears up the font rendering. So there's definitely some interaction between box-shadow and position:fixed that messes up the font rendering.

I created a JSBIN example at http://jsbin.com/ijepop/1/ 

When I was creating the example in JSBIN the font rendered correctly initially in the Output window (iframe), but once the page was scrolled, the font rendering changed. Few seconds after scrolling is stopped, the font clears up again.

Comment 6

[BKDotCom]

version 25.0

Bug (without webfont or box-shadow) reproducible with Twitter bootstrap's fixed navbar component... when there is a dropdown in the navbar and only when the navbar is expanded.

http://getbootstrap.com/examples/sticky-footer-navbar/

bug is much more apparent with lighter font on dark background  (replace "navbar-default" class with "navbar-inverse" to see)

Weird observation:  disabling the background-color property in the .dropdown-menu rule while the dropdown is open will redraw the text properly.  The background-color can be re-enabled and the font will continue to render properly even when toggling the dropdown

twitter bootstrap's fixed navbar uses both
position: fixed;   and   z-index: 1030;
disabling either and the font renders properly (with obvious tradeoffs)
Also, when font issue is visible, change z-index to 0, then back to 1030... remains fixed

Comment 7

[BKDotCom]

Attachment: Issue present in twitter bootstrap's fixed navbars (with dropdown menu)