Freecodecamp: 검색 스타일 점프

에 만든 2019년 10월 15일 · 3코멘트 · 출처: freeCodeCamp/freeCodeCamp

버그 설명
페이지를 다시로드하면 두 가지 스타일 문제가 나타납니다.

페이지가 완전히로드되면 자리 표시 자 텍스트가 약간 이동합니다.
검색 히트는 짧게 굵게 표시됩니다.

재현하려면
동작을 재현하는 단계 :

www.freecodecamp.dev (또는 검색이있는 페이지)로 이동
새로 고침
자리 표시 자 텍스트 이동보기
검색 창을 클릭하세요
아무거나 입력
결과가 잠시 굵게 표시되는 것을 확인한 다음 정상 체중으로 변경합니다.

예상되는 행동
페이지는 최종 스타일로 시작해야합니다.

스크린 샷
SearchFOUC

client bug

출처

ojeytonwilliams

모든 3 댓글

이봐, 도와주고 싶어. 코드는 어디에서 찾을 수 있습니까? (처음 기부)

GabCostaSilva 에 2019년 10월 15일

@GabCostaSilva 문제가 어디인지 100 % 확실하지 않지만 SearchBar , SearchHits 및 SearchSuggestion 구성 요소는 모두 어느 정도 관련되어 있습니다. 어떻게 든 SearchSuggestions 처음 렌더링했을 때 올바른 클래스를 얻지 못하는 것 같습니다 .

내일 나 자신을 자세히 살펴볼 계획이지만 PR을 제출하거나 통찰력을 공유 할 수 있습니다. 원하는대로!

ojeytonwilliams 에 2019년 10월 15일

👍1

이러한 구성 요소와 관련이없는 것으로 밝혀졌습니다. 문제는 Lato-300 글꼴이 필요할 때까지로드되지 않는다는 것입니다 (이 경우 검색 결과가 나타날 때). 이로 인해 Arial 가 잠시 깜박이며 이것이 문제의 원인입니다.

글꼴을 미리로드하는 방법을 살펴보고이 문제를 해결하겠습니다.

ojeytonwilliams 에 2019년 10월 16일

🎉1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Freecodecamp: 검색 스타일 점프

모든 3 댓글

관련 문제