lighthouse: CSS loaded as incorrect charset unless explicitly declared

Provide the steps to reproduce

Run LH on https://shkspr.mobi/blog/
When the page reloads, the ✍ emoji incorrectly renders as âœ.

Before LH

Correct Rendering

After LH

After Lightspeed

What is the current behavior?

Why this occurs:

My style.css contains content: "✍";
It is served as Content-Type: text/css; with no charset.
When the devtools reloads the page after Lighthouse runs, it corrupts the text - I think into Windows-1252
If I add @charset "UTF-8"; at the start of the CSS file, it renders correctly after Lighthouse runs.

What is the expected behavior?

The CSS spec says, if a text encoding can’t be determined, assume UTF-8.

(I am unable to change the server to serve Content-Type: text/css; charset=utf-8)

Environment Information

Lighthouse version: Whatever ships with Chromium 78
Chrome version: Version 78.0.3904.108 (Official Build) snap (64-bit)
Operating System: Ubuntu

Related issues

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 1
Comments: 33 (4 by maintainers)

Most upvoted comments

We’ve passed the 1 year anniversary of this bug - and it is still a problem. Could someone please help me fix it?

https://user-images.githubusercontent.com/837136/102726447-d792dd80-4316-11eb-86ef-75c5343271da.mp4

To reproduce:

Visit https://shkspr.mobi/test/test.html
Use an incognito window with no extensions, on the latest version of Chrome
Run a Lighthouse report as a Desktop device
You may need to be set to en_gb
Reproduced on Mac and Linux and Windows - see above

Minimum Viable Code:

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="test.css">
 </head>
 <body>
 	<hr class="emoji"/>
 </body>
 </html>

CSS

.emoji:after {
    content: "✍";
    font-size: 2em;
    display: inline-block;
    position: relative;
    top: -0.33em;
}

edent on Dec 20, 2020

I took a look at the data in chrome://net-export/ but nothing worthwhile there. Kinda makes sense to me, given that the memory cache lives in the renderer and net-layer is way out in the browser process.

paulirish on Dec 21, 2020

I’ve reproduced it on Mac. Mojave. Chrome Version 78.0.3904.108 (Official Build) (64-bit)

Screenshot 2019-12-01 at 18 11 56

edent on Dec 1, 2019