Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS loaded as incorrect charset unless explicitly declared

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:32 (4 by maintainers)

Top GitHub Comments

2reactions

edentcommented, Dec 20, 2020

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;
}

1reaction

paulirishcommented, Dec 21, 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.