[iOS] WordPress Ad Inserter 플러그인 사용 시 모바일에서 스크롤이 먹통 될 때

내 블로그에 구글 애드센스를 추가하고 나서부터 발생했던 버그중에 하나가 모바일 환경일 때 스크롤을 하면

간헐적으로 스크롤이 진행되지 않고 마치 문서의 끝인것 마냥 움직이지 않는 버그가 발견되었다.

크게 문제 있을 정도는 아니여서 냅두려고 했으나 모든 블로그 게시글 마다 증상이 발생하고 있어 Web Inspector 를 통해 원인을 파악했다.

증상

증상이 발생한 화면은 영상을 보면 이해를 할 수 있다.

하단에 분명히 내용이 더 있는데도 불구하고 하단으로 더이상 내려가지 않고 스크롤이 더이상 진행을 할 수 없는 문제가 있다.

원인

Ad Inserter 라는 WordPress 플러그인에서 각 div 요소마다 처리할 때 부모 div 가 독립된 내용이어야 되는데

같은 요소로 처리되어서 Google Adsense의 요소가 끝나지 않아서 발생하는 것으로 추정하고 있다.

따라서 다음과 같이 css 를 override 처리해서 레이어 자체를 별개로 보도록 설정했다.

결과

css 요소를 override 처리하고 나온 결과는 의도한대로 정상적으로 사이트에 광고가 표시되어도 스크롤이 먹통이 되지 않는다.

이것보다 더 좋은 방법이 있는지는 딱히 확인이 되지 않았다.

여담

이걸 확인하느라고 잠들어있었던 2018년형 인텔 맥북을 꺼내서 Web Inspector를 사용해 원인을 분석했다.

요즘 메모리 값과 SSD 값등이 많이 올라 M5 Ultra 맥북 프로를 사보고 싶었으나 가격이 엄두가 안날정도로 많이 비싸졌다.

Tahoe 로 버전을 올릴 수 없는 인텔 제품군 맥북이라 아쉽지만 가격이 안정화 되면 제품을 새로 사던가 해야될 듯 하다.