search

DaleStudy / leetcode-website

달레 스터디 홈페이지
https://www.dalestudy.com
8 stars 2 forks source link

Needs to be fixed : Brief flash of unstyled content (FOUC) #149

Closed SamTheKorean closed 2 months ago

SamTheKorean commented 2 months ago

페이지 새로고침 시 스타일링 되지 않는 raw text가 의도하지 않게 잠깐 표시되고 스타일링이 입력된 페이지로 변경되는 FOUC 문제가 있습니다. 해당 문제 분석해보고 솔루션 관련 PR올리겠습니다!

SamTheKorean commented 2 months ago

https://www.jacobmilhorn.com/posts/solving-fouc-in-web-components/

SamTheKorean commented 2 months ago

Web components have to wait for JavaScript to run customElements.define() before encapsulated styles are applied along with the rest of the Shadow DOM. This can cause an ugly Flash of Unstyled Content (FOUC) that is easily remedied by pre-styling the registered component using :not(:defined) CSS pseudo-classes.

SamTheKorean commented 2 months ago

구글 레퍼런스도 참고 부탁드립니다! https://web.dev/articles/custom-elements-v1?hl=en#pre-styling_unregistered_elements

DaleSeo commented 2 months ago

조치 안 하는 걸로 결정. 혹시 파고 싶은 분은 말리지 않음.