bramstein · March 3, 2014 13:57
diff --git a/chrome-33-style-change.html b/chrome-33-style-change.html
 <!doctype html>
 <html>
  <head>
    <title>Chrome 33 web font bug</title>
    <style>
      @font-face {
        font-family: TestFont;
        /* This is not a real web font, but close enough
           to trick browsers into thinking it is. */
        src: url(data:font/opentype;base64,);
      }

      span {
        font-family: TestFont;
        font-size: 50px;
        background-color: gray;
      }

      span:hover {
        /* This will force a repaint when the user
           hovers over the span. */
        color: black;
      }
    </style>
  </head>
  <body>
    <span>Web Font</span>
    <script>
      var style = document.createElement('style'),
          body = document.body;

      /* Add an empty style */
      body.appendChild(style);

      /* Force a reflow/paint */
      body.offsetHeight;

      /* Remove the style */
      body.removeChild(style);

      /* Uncommenting the following lines will force a repaint
         of the body element and render the font as expected. */
      //body.style.visibility = 'hidden';
      //body.offsetHeight;
      //body.style.visibility = 'visible';
    </script>
    <p>Chrome 33 is affected by <a href="https://code.google.com/p/chromium/issues/detail?id=336476">a bug that causes web fonts not to render</a>. This is caused by a change in stylesheets while the font is still loading. We simulate this behaviour by inserting an empty stylesheet while the document is being processed.</p>

    <p>If the gray box above does not contain any text your version of Chrome (v33) is affected by this bug. You can hover over the box to force a repaint. The text "Web Font" which was previously not rendered will appear. Also note that the size of the box changes after the forced repaint.</p>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Chrome 33 web font bug</title>
	<style>
	@font-face {
	font-family: TestFont;
	/* This is not a real web font, but close enough
	to trick browsers into thinking it is. */
	src: url(data:font/opentype;base64,);
	}

	span {
	font-family: TestFont;
	font-size: 50px;
	background-color: gray;
	}

	span:hover {
	/* This will force a repaint when the user
	hovers over the span. */
	color: black;
	}
	</style>
	</head>
	<body>
	<span>Web Font</span>
	<script>
	var style = document.createElement('style'),
	body = document.body;

	/* Add an empty style */
	body.appendChild(style);

	/* Force a reflow/paint */
	body.offsetHeight;

	/* Remove the style */
	body.removeChild(style);

	/* Uncommenting the following lines will force a repaint
	of the body element and render the font as expected. */
	//body.style.visibility = 'hidden';
	//body.offsetHeight;
	//body.style.visibility = 'visible';
	</script>
	<p>Chrome 33 is affected by <a href="https://code.google.com/p/chromium/issues/detail?id=336476">a bug that causes web fonts not to render</a>. This is caused by a change in stylesheets while the font is still loading. We simulate this behaviour by inserting an empty stylesheet while the document is being processed.</p>

	<p>If the gray box above does not contain any text your version of Chrome (v33) is affected by this bug. You can hover over the box to force a repaint. The text "Web Font" which was previously not rendered will appear. Also note that the size of the box changes after the forced repaint.</p>
	</body>
	</html>