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