Nie wiem czy tylko ja mam taki problem ale na szybko przeglądając nie znalazłem innego wątku o tym
co któreś odświeżenie (1 na 10 może) zamiast niektórych znaczków widzę na stronie coś takiego. Na początku myślałem że to problem z przeglądarką ale problem się pojawia dość często, zajrzałem że te znaczki są w pliku .css:
https://4programmers.net/css/main-19bcfedb07f5a2948ccf.css
który zdaje się nie definiować nigdzie charsetu
content-type: text/css
Korzystamy z SCSS. @charset jest zdefiniowany w 1 linii w pliku:
@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,latin-ext");
// variables need to be at the top
@import "helpers/variables";
@import "helpers/utilities";
@import "helpers/mixins";
Nie wiem czemu parser SCSS usuwa tę deklarację :( WTF.
Czy śledztwo poszło na przód?
Nie. Jeżeli ktoś wie coś więcej i może pomóc, to proszę o informacje.
Nawet zablokowanie domeny fonts.googleapis.com nic u mnie nie zmienia. Wygląda na bardzo specyficzny problem. Próbowałeś w innej przeglądarce? W tej samej, ale bez rozszerzeń? Może jakieś ustawienia kodowania na sztywno w opcjach?
https://github.com/sass/sass/issues/1253
https://www.sassmeister.com/gist/9537678
if any html-character present in any *.scss file, even like comment, SASS automaticly adding '@charset "UTF-8";' in compiled .css file.
Sass will only include a @charset declaration in the CSS output if there are any non-ASCII characters. CSS is parsed as ASCII by default, so it's unnecessary if the stylesheet is pure ASCII.
Tak sobie myślę, czy to nie jest tak, że widzi, że ten plik nie ma unicode i dlatego wycina charset? Może jest to robione przed importem? Nie powinno, ale może? A spróbuj dodać do tego pliku coś w stylu:
.mistyfikacja {
content: "👻";
}
i zobacz, czy charset zostaje?
Ja nigdy takiego błędu nie zaobserwowałem u siebie.
Widziałem to kilka razy, ale nie wiem w jakich okolicznościach. Możliwe że random.
Odświeżenie strony pomaga.
To by się kłóciło, że to wycinanie charsetu przez sass, bo zakładam, że sass parser robi to raz przy budowaniu, a dla klienta wysyłany jest ten sam statyczny css.
Potwierdzam, po odświeżeniu zazwyczaj jest ok. Jest to bardzo losowe, pliki się nie zmieniają gdy błąd występuje.
Wygląda jakby przeglądarka próbowała zgadnąć charset bo nigdzie go nie może znaleźć, możliwe że robi to na podstawie innych treści na stronie lub załadowanych już styli.
Widzę że styl załadowany z https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,latin-ext&display=swap ma dodany charset w nagłówkach. Podejrzewam że może następować tu race-condition i przykładowo jeżeli styl z googleapis załaduje się przed stylem z 4programmers to przeglądarka przyjmuje że charsetem dla drugiego arkusza też jest utf-8, podobnie jeżeli style już są w cache'u.
Proponuję po prostu dodać charset do nagłówków HTTP tak jak robi to google
Może pomoże podanie przeglądarek i systemów operacyjnych przez osoby, które się z tym zetknęły? (Jeśli chodzi o mnie, nie pamiętam, czy kiedykolwiek coś takiego widziałem, czy nie).