Open Bug 739534 Opened 13 years ago Updated 2 years ago

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

Categories

(Core :: Web Painting, defect)

10 Branch
x86
Windows XP
defect

Tracking

()

UNCONFIRMED

People

(Reporter: myf, Unassigned)

Details

Attachments

(3 files)

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
Attached image rendered content of attached html (deleted) —
Attachment #609639 - Attachment mime type: text/plain → text/html
Just for record, issue really does not occur in Windows 7 / Vista
Still present in stable 12. Not present in Nightly 15.0a1 from probably some around 2012-05-28.
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.
Blocks: 739354
No longer blocks: 739354
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.
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
Component: Layout: View Rendering → Layout: Web Painting
Severity: trivial → S4
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: