CODEWITHSUNDEEP
htmlcssgoogle-chrome
Matthew Butterick
Matthew Butterick

Reputation: 1074

Why doesn't Chrome 37 on OS X display this HTML correctly?

In Chrome 37 on OS X, the content of this HTML page does not get refreshed correctly on scroll — it just blanks out. You can also trigger the problem if you try to select text — it will blank out.

But:

This display bug does not affect Chrome 37 on Windows, nor other OS X browsers, nor previous versions of Chrome on OS X (AFAIK).

Thus my questions:

  1. What is happening here?

  2. Is there a workaround that does not involve removing either the soft hyphen or the OpenType feature?

Thank you.

Here is the fiddle.

Here is the HTML, with the same paragraph repeated 5 times (and a numeral on the end of each paragraph for reference):

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
<title>here</title>

<style type="text/css">

body {
-webkit-font-feature-settings: 'kern' 1;
}

</style>

</head>
<body>hyphen&shy;ated

But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth.

But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth2.

But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth3.

But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth4.

But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth5.

</body>
</html>

PS. Here’s a codepen that shows the same problem in a slightly different way.

Upvotes: 2

Views: 387

Answers (3)

bumfo
bumfo

Reputation: 252

I found a solution incidentally as it is still buggy in chrome 38 mac. 

article h1, article h2, article p, article li, article blockquote {
    white-space: pre-line;
}

where p is the container of &shy;

Upvotes: 1

Matthew Butterick
Matthew Butterick

Reputation: 1074

It's a bug. The bug also affects Opera 24 on OS X (because it's based on the buggy Chrome 37 code).

The workaround is to either delete the soft hyphens in the text, or remove font features for webkit (i.e., all occurrences of the CSS property -webkit-font-feature-settings). Note that this property must be deleted — you can't link in a second CSS file that merely reverses the settings, e.g., with * {-webkit-font-feature-settings: inherit}. For whatever reason, as soon as the faulty browsers read this property, the bug emerges.

Of course, the problem with this workaround is that it's overinclusive: it disables -webkit-font-feature-settings in all versions of Chrome and Opera, not just the faulty ones. To avoid this consequence, I forked my basic styles.css into a second version with the -webkit-font-feature-settings stripped out. Then I use JavaScript to detect the faulty browsers and load the stripped CSS. A frowned-upon technique, I know, but the simplest & most effective way to fix it (without penalizing people who use other browsers).

Upvotes: 1

user123444555621
user123444555621

Reputation: 153274

What is happening here?

It's a bug in Chrome 37.

Is there a workaround that does not involve removing either the soft hyphen or the OpenType feature?

Avoid scrolling content.

Upvotes: 0

Related Questions