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 issu

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)

Answer 4

This issue does not happen for In-article ads. This may be the reason why this issue seems isolated and rarely reported because most adverts are likely In-article ads.