intfiction.org의 Discourse 포럼에서는 퍼즐 요소가 많은 어드벤처 게임에 대해 많이 이야기하기 때문에 [spoiler] 태그가 큰 도움이 됩니다. 이 주제에는 힌트마다 하나씩, 수많은 개별 스포일러 태그가 있습니다.
이 페이지는 Google Chrome에서는 비교적 괜찮게 작동하지만, Firefox에서는 성능이 좋지 않으며, 느린 Android 스마트폰에서도 잘 작동하지 않습니다. Android에서 Firefox를 사용할 때는 특히 매우 느립니다. (제가 무슨 말인지 알 수 있도록 조금 아래로 스크롤해 보세요.)
이것은 아마도 Firefox의 문제일 것입니다.
그럼에도 불구하고, 스포일러 플러그인은 블러가 느리거나 제대로 처리되지 않는 브라우저/플랫폼(Firefox, Android)에서는 filter: blur(0.5em) 대신 스포일러 텍스트에 color: black; background: black을 적용해야 한다고 생각합니다.
이 CSS를 직접 수정할 수 있는 방법이 있을까요?
CSS를 사용하면 텍스트와 일치하는 배경색으로 위에서 설명한 효과를 구현할 수 있습니다. 이를 테마 컴포넌트에 추가하면 플러그인의 CSS를 덮어쓸 수 있지만, 스포일러 안의 이미지에는 적용되지 않습니다.
이 방법은 모든 브라우저에서 변경 사항을 적용하므로, Firefox에만 적용하려면 JS로 사용자 에이전트를 감지해야 합니다.
.spoiler-blurred {
filter: none;
background: var(--primary);
color: var(--primary);
}
.discourse-no-touch .spoiler-blurred:hover {
filter: none;
/* 여기에 다른 호버 효과를 추가할 수 있습니다 */
}
.spoiled {
background: transparent;
}
Firefox의 성능 문제가 심각하다는 소식에 안타깝습니다. 공식적으로 Android용 Firefox를 지원하지 않지만, Firefox 전반에 영향을 미치는 것으로 보입니다. filter 대신 text-shadow를 사용해 파란색을 생성하는 기존 방식으로 돌아가는 것을 고려해야 할 것 같습니다.
모드를 업데이트하여 “스포일러 흐림/스포일러 가리기” 스타일 체크박스를 추가하는 것은 어떨까요? 스포일러 가리기는 스포일러 텍스트를 검은색 막대로 덮어, 텍스트를 흐림으로 렌더링할 때 발생하는 브라우저의 부하를 줄여줄 수 있을 것입니다.
이렇게 하면 모든 빠르고 모바일에 특화된 모드를 적용할 수 있는 전용 “모바일” 테마를 만드는 것이 가능해질 것입니다.
최신 버전의 Android용 Firefox에서도 확실히 수정되었습니다!
따라서 https://arewefenixyet.com/ 기준으로, 일부 국가에서는 이미 수정되었고 다른 지역에서는 몇 주 안에 적용될 것으로 보입니다.
정리하자면, 저는 macOS Catalina 10.15.5 환경의 2019년 MacBook Pro 16"에서 Firefox 79.0로 해당 테스트 페이지에서 느린 블러(slow-blur) 버그 925025를 재현했습니다.
Firefox는 블러 실행에 96,141ms가 걸렸고, Chrome은 9,998ms가 걸렸습니다. 아마 나이트리(nightly) 버전에서 수정되었을까요?
수정: 네, 맞습니다. 81.0a1 (2020-08-10) (64-bit) 버전에서는 첨부파일 벤치마크에 10,006ms가 걸렸고, 스포일러로 가득한 Discourse 페이지도 꽤 부드럽게 렌더링되었습니다.
그러니까 아마 지금은 아무 조치도 취하지 않고 Mozilla이 수정 사항을 배포하기를 기다리는 것이 좋겠습니다.
감사합니다!
실제로는 http://arewewebrenderyet.com/에서 기본값으로 전환되고 있는 Webrender가 문제의 핵심이라고 생각합니다.
이미 대부분의 사용자가 사용하는 Windows에서는 활성화되어 있으며, 다른 플랫폼에서도 곧 도입될 예정입니다! 저희 팀 입장에서는 새 PC에서 가장 먼저 활성화하는 설정이기도 합니다 
.
