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

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

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)