Javascript) draggable한 element를 드래그 시 화면 일부가 하얗게 변하는 현상 해결방법(Chrome 버전 106)

 최근 코드 변경 사항이 없는데도 불구하고 하루아침에 Element를 드래그하면 화면이 하얗게 변하는 문제가 발생했다. 이럴 때 다른 요소(위치를 유추하여 드래그해야 한다..)를 또 다시 드래그하거나, 화면 배율을 늘리거나 줄이는 등의 변화를 주면 다시 화면이 돌아오긴 한다만 여간 불편한 일이 아니었다. 아무래도 코드 상의 문제라기 보다는 일부 라이브러리가 브라우저의 최신 버전을 호환하지 않아 그러한 문제가 생긴 것이 아닌가 하고 생각했는데, 아직까지도 정확한 원인은 밝히지 못했다. 다만, 스택오버플로우에서 나와 유사한 사례를 찾았고, 무슨 관련이 있나 싶은 방법이지만 이를 해결하는 방법 또한 찾았다. 브라우저의 문제는 맞았다..!

 

해결 방법

 해결 방법은 간단하다. 다만, 이것이 무슨 관련이 있는지는 모르겠다. draggable 요소(html tag의 attribute draggable을 의미한다.)의 style로 아래 내용을 추가한다.

transform: translate(0, 0);
z-index: 0;

 

아예 아래와 같이 간단하게 처리하는게 나을 듯 하다.

[draggable=true] {
	transform: translate(0, 0);
	z-index: 0;
}

 

1. 참고로 jQuery draggable을 사용한 요소들은 해당 문제가 발생하지 않았으며, html5에서 제공하는 attribute인 draggable이 true인 요소들을 드래그할 때에만 해당 이슈가 발생했다.

2. 106 버전에서 105 버전으로 다운그레이드했을 때에도 발생했고, 104버전 이하로는 해당 문제가 발생하지 않았다. 크롬 자동 업데이트를 끄는 방법과 다운그레이드하는 방법은 검색하면 많이 나오니 금방 찾을 수 있을 것이다. 하지만 언제까지나 업데이트를 막을 수 있는 것도 아니고 내가 만든 서비스를 사용하는  사용자의 크롬 버전까지 낮춰 사용하길 강요할 수도 없으니 아래와 같은 방법이라도 해결할 수 있기를 바란다.

 

---

참고

https://stackoverflow.com/questions/73972272/google-chrome-106-draggable-causing-elements-to-disappear