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)
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
Reporter | ||
Comment 1•13 years ago
|
||
Reporter | ||
Updated•13 years ago
|
Attachment #609639 -
Attachment mime type: text/plain → text/html
Reporter | ||
Comment 2•12 years ago
|
||
Just for record, issue really does not occur in Windows 7 / Vista
Reporter | ||
Comment 3•12 years ago
|
||
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.
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
Assignee | ||
Updated•6 years ago
|
Component: Layout: View Rendering → Layout: Web Painting
Updated•2 years ago
|
Severity: trivial → S4
You need to log in
before you can comment on or make changes to this bug.
Description
•