GoogleChrome / GoogleChrome/lighthouse

CSS loaded as incorrect charset unless explicitly declared

Open
#10,060 35 comments 2 reactions 1 assignee Claimed by @connorjclark View on GitHub
bug DevTools needs-investigation P1.5
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 20h
Merged PRs (30d)
19

Description

#### Provide the steps to reproduce
1. Run LH on https://shkspr.mobi/blog/
2. When the page reloads, the `✍` emoji incorrectly renders as `âœ`.

### Before LH
![Correct Rendering](https://user-images.githubusercontent.com/837136/69915449-dd392f00-1446-11ea-9217-e72bed7f389a.png)

### After LH
![After Lightspeed](https://user-images.githubusercontent.com/837136/69915448-dd392f00-1446-11ea-8435-0c6643463c84.png)

#### 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](https://www.w3.org/TR/css-syntax-3/#input-byte-stream), 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**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.