when working on a website that is heavily front-end (vue) and thus when using the async version of adsense.
When testing in various browsers I noticed a display issue in chrome where the height of my page was being changed immediately after ads loaded. Hours later I discovered that within show_ads_impl.js it is injecting style=”height: auto !important;” (or similar) into various places in my source code.
I could not find help on this anywhere and am desperate to find a solution - this really impacts the user experience within my project quite negatively.
I asked for help on the adsense support website and did not get a single response.
I was successful at removing the style attribute added by the ads with a delayed callback routine in my javascript - but as you can imagine that caused the page to flicker in a way that is certainly unpleasant.
https://pagead2.googlesyndication.com/pagead/js/r20190408/r20190131/show\_ads\_impl.js
Note the link above will not contain the “injection” code unless you download it from chrome.
The code in question in the file above looks like this:
a.o && !c && f && (e.setProperty(“height”, “auto”, “important”),
d && !$v(String(d.minHeight)) && e.setProperty(“min-height”, “0px”, “important”),
d && !aw(String(d.maxHeight)) && e.setProperty(“max-height”, “none”, “important”))) : (Yv(a, 1, l, c, “height”, h, a.B, a.l),
Solution :
For anyone that may stumble on this in the future. Below is how I was able to “solve” the problem in a way that I deemed good enough to move on.
Like I stated above, google Adsense was injecting style=”height: auto !important; min-height: 0px !important;” into my primary page wrapper element on my website.
Below is the code I used to solve the problem - essentially undoing what Adsense does.
// this code listens for a mutation on the main-wrapper element and resets
// the style attribute back to “null”.
// This is necessary because Google Adsense injects style into this main-wrapper
// element changing its height properties. Note: This only occurs in Chrome.
let wrapper = document.getElementById(‘main-wrapper’)
const observer = new MutationObserver(function (mutations, observer) {
wrapper.style.height = ‘’
wrapper.style.minHeight = ‘’
})
observer.observe(wrapper, {
attributes: true,
attributeFilter: [‘style’]
})