[Web] Adsense를 포함하는 wrapper element style(height)가 임의로 변경되는 현상

adsense를 포함하는 wrapper element에 지정한 적도 없는 스타일이 지정되는 문제가 발견되었다.

 

height: auto !important;로 된 부분이 세 부분이 있는데,

전부 내가 지정한 적 없는 스타일 값이다.

 

이게 도대체 왜 생길까 며칠 동안 찾아보다가 결국 adsense 관련 문제라는 것을 깨달았다.

 

가장 마지막에 있는 div를 열어 보면 내부에 구글 ad를 표시하는 태그(<ins ~~~/>) 가 존재한다.

 

실제로 그 태그를 지운 다음 다시 열어보면

height: auto !important 는 지정되지 않는다.

 

이 스타일이 문제가 되는 지점

Nested Scroll을 사용하는 element 내부에 광고를 표시하려 할 경우 레이아웃이 깨진다.

 

당연하게도 다른 컴포넌트에서는 저 스타일이 문제되지 않지만

 

이런 식으로 모달 내부에서는 별도의 스크롤 섹션을 갖게 되는데,

여기에서는 height: auto 가 걸릴 경우 스크롤러를 구현할 수 없어 높이가 무제한으로 늘어나버린다.

 

구글이 이런 문제점을 몰랐을 확률은 적으니...

아마 Nested Scroll 컴포넌트 내부에서는 광고를 부착하지 말라는 뜻 같다.

 

물론 style 감시를 통해 height 속성이 변경될 경우 

즉시 그 속성을 무효화시킬 수도 있으나 괜히 시비걸릴지도 모르니 하지 않을 것이다.

결론

중첩 스크롤(Nested Scroll)이 적용된 엘리먼트 내부에 구글 광고를 부착하지 말자