New issue
Advanced search Search tips
Starred by 17 users

Issue metadata

Status: WontFix
Closed: Sep 2015
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug

Sign in to add a comment

Issue 78529: Text is invisible with text-rendering: optimizelegibility and <video> on the page

Reported by, Apr 6 2011

Issue description

Chrome Version       : 11.0.696.34 and 12.0.726.0 both show the problem (10.0.648.204 works fine though)
OS                   : Win 7 (Win XP and Mac OSX work fine, Win Vista not tested)
URLs (if applicable) :
Other browsers tested:
     Safari 5: OK
  Firefox 4.x: OK
       IE 7/8/9: OK

What steps will reproduce the problem?
1. Load the simple test case at
2. Observe that the three test case divs in the markup don't render text at all
3. Observe that removing the <video> from the DOM causes the test cases to appear
4. Observe that removing the text-rendering: optimizelegibility; property with the inspector causes the test cases to appear

It appears that this is a regression since the latest Chrome 10.x loads the test page without issue (as seen in the screenshot). 

What is the expected result?
The text should be rendered exactly the same, regardless of the presence of both text-rendering and <video>.

What happens instead?
When a <video> element is present on the page, any text with text-rendering: optimizelegibility is invisible.

Please provide any additional information below. Attach a screenshot if
It seems as though the presence of <video> + text-rendering:optimizelegibility is causing Chrome to use a different rendering pipeline on Win7, for some reason.
506 KB View Download

Comment 1 by, Apr 8 2011

I kinda don't think it's the <video> that's the problem. I bet removing the video from the DOM causes some kind of redraw which makes them appear. I don't have a test case, but I had a crapload of reports on from people with Windows + Chrome 11 or 12 saying they had disappearing text all over the site, and I don't use much <video>, but I do use optimizelegability. I've removed that, and no reports so far.

Comment 2 by, Apr 8 2011

I've got some interesting findings for this bug:

If I set either a text-stroke or text-shadow the invisible text it will become visible. e.g.

-webkit-text-stroke: 1.0px rgba(0,0,0,0);
text-shadow: 1px 1px 1px rgba(0,0,0,0);

Or if I change it to a color other than the value it's inheriting e.g.

.test * { color: #ff0000; }

Trying to set it to the same colour it inherits won't work.

Seems any property that causes a redraw on the text will make it show up.

Comment 3 by, Apr 8 2011

Ok found some further quirks, it seems the custom font is treated as though it has opacity set and setting it to white makes it fully invisible? 

Giving it a more contrasting color such as red will make it show up but it will still have some transparency to it. text-stroke or text-shadow stop this weird opacity bug from happening?

Comment 4 by, Apr 8 2011

Labels: -Area-Undefined Area-WebKit Feature-Fonts WebKit-Core

Comment 5 by, Apr 8 2011

@chris: The only reason I thought that video was the culprit is that if you include optimizelegibility and NOT the video tag, then the fonts render fine when the page loads. So it seems that optimizelegibility is necessary but not sufficient by itself to trigger this problem. There may be other things that will also trigger the problem in combination with optimizelegibility though.

Comment 6 by, Jul 7 2011

Status: Assigned
mike to triage. (please send back to me if it's not CSS, just remove yourself as owner.)

Comment 7 by, Sep 4 2011

I can replicate this every time. Chrome 15.0.865.0 on Win 7 x64, Nvidia drivers 280.26.

Anything that causes the page to switch to GPU rendering (from <video> to <canvas>, to translate3d), also causes some text to fade/disappear. The whiter the text is, the more it fades away. White text disappears completely, while black text remains intact.

You can find here a simple test case which shows the problem with the minimum number of elements involved.

Comment 8 by Deleted ...@, Oct 28 2011

You can fix the weird opacity on text by adding text-transform: auto; to the affected elements, works a treat for me now!

Comment 9 Deleted

Comment 10 by, Dec 21 2011

This works fine on 16.0.912.63 beta-m & 18.0.975.0 canary
Please find the attached screen shot.
428 KB View Download

Comment 11 by, Jan 13 2012

Works as expected for 16.0.912.75 and canary 18.

Comment 12 by, Jan 13 2012

I am still experiencing this on Chrome 16 and Canary 18 on this site:

Comment 13 by, Feb 14 2012

Still a problem with webfont loaded from google fonts, optimizelegibility on, chrome 17.0.963.46m on Windows Vista.

Comment 14 by, Mar 2 2012

I still have this problem -- but *only* if the content is within an iFrame! I've placed reproducible demos here: -- with iframe, shows problem. -- without iframe - shows no problem.

Comment 15 by, Mar 2 2012

A further update: my demos only exhibit problems for users on Windows.  Mac users aren't seeing the same issue I am.

Comment 16 by, Mar 10 2013

Project Member
Labels: -Area-WebKit -Feature-Fonts -WebKit-Core Cr-Content Cr-Content-Fonts Cr-Content-Core

Comment 17 by, Apr 6 2013

Project Member
Labels: -Cr-Content Cr-Blink

Comment 18 by, Apr 6 2013

Project Member
Labels: -Cr-Content-Fonts Cr-Blink-Fonts

Comment 19 by, Jul 15 2015

Labels: -Cr-Content-Core

Comment 20 by, Sep 23 2015

Status: WontFix
Thanks for the report. 

I can now see all six lines of text on Chrome 44 on Windows 7.

Sign in to add a comment