주제를 열면 현재 선택된 게시글이 특정 색상으로 페이드 인됩니다. 메타의 다크 테마에서는 파란색으로 페이드 인된 후 일반적인 검은색으로 전환됩니다. 최근에는 전환이 매끄럽게 이루어지지 않고, 전환이 끝날 무렵에 떨리는 현상이 발생하기 시작했습니다. 처음에는 community.wanikani.com의 다크 테마에서 이 문제를 발견했지만, 메타에서도 동일한 문제가 발생하고 있습니다. 두 대의 다른 컴퓨터에서 Chrome과 Edge 양쪽 모두에서 이 문제를 확인했습니다. 제가 사용하는 다른 Discourse 사이트는 최신 버전보다 꽤 뒤처져 있는 것으로 확신하는데, 해당 사이트에서는 이러한 문제가 나타나지 않습니다. 브라우저 콘솔을 통해 해당 사이트의 버전을 확인할 방법이 있다면(그 정보가 유용하다면) 알려주시면 여기에 해당 정보를 추가하겠습니다.
아래 영상을 통해 시연을 확인할 수 있습니다.
Chrome의 경우: 사이트의 빈 부분을 우클릭한 후 '페이지 소스 보기’를 선택하세요. 약 9번째 줄附近에서 버전 정보와 커밋 자체를 확인할 수 있습니다. 두 가지 모두 공유해 주세요.
community.wanikani.com (해당 문제가 있는 사이트):
Discourse 2.4.0.beta6 - https://github.com/discourse/discourse version 437edfc4157aac4d9a50d911bca550d4425193cfcommunity.bunpro.jp: (해당 문제가 없는 사이트):
Discourse 2.4.0.beta2 - https://github.com/discourse/discourse version 3503758599ae451b962afa4e05c8e88dcb0f021a생각했던 대로, 문제가 나타나지 않는 사이트는 상당히 오래된 버전을 사용하고 있습니다. 참고로, 이 문제는 community.wanikani.com에서 최근 1~2주 사이에만 발생한 것으로 보입니다. 하루에 여러 번 해당 사이트를 방문하기 때문에 문제가 시작되는 즉시 알아차렸을 것입니다.
라이트 테마에서도 이 문제가 발생합니까?
저희 사이트도 Meta에서 문제를 재현할 수 있으며, 해당 사이트는 더 오래된 커밋을 사용하고 있습니다.
이것이 저희 측 버그가 아닐 것이라고 확신합니다. fiddle 에서도 재현할 수 있습니다.
실행(Run) 버튼을 여러 번 누르면 첫 번째와 두 번째 박스에는 문제가 발생하지 않는다는 것을 알 수 있습니다.
첫 번째 박스는 라이트 테마를 나타내며 문제가 없습니다. 두 번째 박스는 비교를 위해 검은색 배경을 추가한 것입니다. 이 박스에도 문제가 없습니다.
문제는 기본 다크 테마와 동일한 색상을 사용하는 세 번째 박스에서 가장 두드러집니다. 브라우저가 이 색상 조합으로 인해 어딘가에서 문제를 일으키는 것 같습니다. 제가 알고 있는 모든 애니메이션 관련 우회 방법을 시도해 보았지만 결과는 동일했습니다.
애니메이션을 변경하거나 다른 색상을 사용하지 않는 한, 브라우저에서 수정이 될 때까지 기다리는 것 외에 우리가 할 수 있는 일이 무엇인지 확실하지 않습니다. 그리고 그 수정은 당분간 이루어지지 않을 수도 있습니다.
말씀드린 것처럼 크롬과 엣지 양쪽에서 모두 발생하고 있습니다. 엣지는 아직 크로미움 기반이 아니기 때문에, 두 브라우저가 동일한 렌더링 엔진을 사용한다거나 하는 것은 아닙니다. 그래서 갑자기 이런 문제가 발생하기 시작한 것이 더욱 이상하게 느껴집니다. 물론 엣지를 확인한 것은 크롬의 버그가 아닌지 확인하려는 목적이었습니다. 엣지에서는 누가 알겠어요, 얼마나 오래前から 이런 문제가 있었을 수도 있고, 크롬에서는 최근에야 도입된 것일 수도 있습니다.
또한, 이 문제를 처음 발견한 것은 제가 1주일 반밖에 사용하지 않은 새로운 노트북에서였습니다. 그래서 제 새 컴퓨터에 특이한 문제인지 배제하기 위해 두 번째 컴퓨터에서도 문제를 확인했습니다. 하지만 나중에 구형 노트북을 부팅해서 거기서도 발생하는지 확인해 볼 수 있습니다. 컴퓨터에 따라某种의 하드웨어 최적화가 이루어지고 있는 것일 수도 있으니까요.
매일같이 마주해야 하는 크로스 브라우저 지원의 지옥에 오신 것을 환영합니다 
정리하자면, 이는 유효한 문제이므로 게시해 주셔서 감사합니다. 이 문제를 수정하고 싶지만, 여기서는 브라우저 문제를 우회하는 것 외에 선택지가 제한적입니다.
애니메이션을 변경하면 지난 5년 이상 Discourse를 사용해 온 모든 사용자에게 새로운 패턴을 도입하게 됩니다. 다크 테마의 색상을 변경하는 것도 Discourse를 사용하는 모든 사이트에 영향을 미칩니다. 이 두 가지 모두 제가 고려하고 싶은 선택지가 아닙니다.
이 문제를 개선할 수 있는 모든 해킹 기법을 다 써 보았다고 말하려는 것은 아니지만, 제가 아는 모든 방법들은 어떤 차이도 만들지 못했습니다.
그러나 나중에 발견할 수 있는 해킹 기법이 없는 한, 예를 들어 3개월 정도 기다렸다가 그때 다시 검토해 보자는 의견을 제시합니다.
이미 3개월이 지났으니 다시 확인해 보았습니다. 이 문제는 여전히 Chrome에서 발생하고, Firefox에서도 발생하는 것 같습니다. 여전히 우회 방법이 떠오르지 않는다면 괜찮지만, 혹시 모르니 이렇게 알려드립니다.
이것은 다크 테마에 특화되어 있고 또한 브라우저에 따라 달라지기 때문에, 저는 이 문제에 대해 조금이라도 신경 쓸 여유가 없습니다.
그런데 크롬, 엣지, 파이어폭스에서 모두 발생하는 걸 보면 정말 브라우저에 특화된 문제라고 할 수 있을까요? 그리고 다크 테마를 사용하는 사람이 꽤 많지 않나요?
다른 사람이 불만을 제기하는 것 같지 않으니, 괜찮은 거죠?
Sean은 저희가 호스팅하는 사이트의 회원입니다.
이것은 “돈을 내면 되는” 문제가 아니라, 잘 알려지지 않은 브라우저 버그입니다. 여기서는 jQuery 해킹 애니메이션이 아니라 CSS 애니메이션을 사용하는데, 이 아주 사소한 시각적 문제를 해결하는 명백한 방법이 있다고 생각하지 않습니다.
걱정 마, 그냥 안부 인사하려고 한 거야.
이 문제가 걱정된다면, 실제로 버그를 수정할 수 있는 사람들, 즉 브라우저 개발자에게 보고하는 것을 권장합니다. 보고를 위해 미리 조립된 재현 사례가 업스트림에 게시되어 있습니다.
@seanblue, 버그 보고와 관련하여 다음 링크들을 확인해 보시는 것이 좋을 것 같습니다.
[details=“Microsoft Edge”]
Alt + F > 설정 > 외관 > "피드백 표시