Adsense injecting style tag into my page (in chrome)

Question

I am working on a website that is heavily front-end (vue) and thus I am 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),

Answer 1

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']
})

Answer 2

Here about this from Google: https://support.google.com/adsense/answer/9467650.

Here is working solution: https://support.google.com/adsense/thread/12533409?hl=en.

Be sure you remove data-ad-format="auto" and data-full-width-responsive="true" from your code. Otherwise it will not work.

But in this case, it broke responsiveness on orientation change. When you load a page in landscape and then turn to portrait - it stays landscape Ad huge width and breaks the page. If you load as portrait and turn to landscape it stay small ad size. So it requires additional hacks with javascript or css media queries.

I removed attributes from my ads: data-ad-format="auto" And now on such pages there are no injected styles: style="height: auto !important;"

Answer 3

After a lot of trial and error, I found a quick hacky workaround that doesn't require JavaScript.

<div style="position: relative; width: 100%; max-width: 100%;">
    <ins class="adsbygoogle"
         style="display:block; position: absolute; width: inherit; max-width: inherit;"
         data-ad-client="ca-pub-client-here"
         data-ad-slot="ad-slot-here"
         data-ad-format="auto"></ins>
    <script>
         document.addEventListener('DOMContentLoaded', (e) => {
             (adsbygoogle = window.adsbygoogle || []).push({});
         }, false)
    </script>
</div>

Wrap your AdSense ad within a div with position: relative; width: 100%; max-width: 100%; on it.

In the AdSense ad, add position: absolute; width: inherit; max-width: inherit;.

It does work for me, but Google may break this "workaround" sooner or later, if this doesn't work for you, try using @Sawces answer.

Don't worry about not setting the height tag on the div, AdSense will automatically change the height when the ad is loaded.

However this isn't perfect, because it is a absolute div, so the ad may overflow and cause issues, but at least Google isn't changing your entire layout for no reason.

You may have noticed that I wrapped the ad code within a DOMContentLoaded event, I added that to avoid ads overflowing. (Before the change AdSense would try placing big ads in small spaces, after the change AdSense would correctly calculate the div width and place an ad that would fit in the div)