Adsense Ads breaking scroll (cutting off content) on mobile

Question

We're having trouble with Adsense ads disrupting scroll behavior for the content of a page, on mobile specifically. When you tap (and hold) your finger on an ad, it does not actually scroll up or down the page, but rather simply moves the screen up and cuts everything else above it off. If you tap (and hold) and drag on anything that's NOT an ad, the page scrolls just fine.

I've linked to a video of the issue below.

Video of scroll behavior issue

Here's the markup in JSX (we're using React):

<div className="resultsAdContainer">
    <div className="resultsAd" style={{display: 'inline-block', margin: '25px auto 25px auto'}}>
        <ins className="adsbygoogle" style={{display: "block"}} data-ad-client={this.props.dataAdClient} data-ad-slot={this.props.dataAdSlot} data-ad-format="auto"></ins>
    </div>
</div>

Here's the CSS selectors:

.resultsAdContainer {
    display: flex;
    justify-content: center;
}
.resultsAd {
    display: inline-block;
    width: 100%;
}

I've tried touch-action: none and also tried adding an event listener for touchmove and touchstart and invoking .preventDefault() when an event is fired on the container DIV.

The only thing I've found to work is adding pointer-events: none on the resultsAd class. Trouble is, that also disables clicking the ads, which is obviously a no-go. I've tried adding pointer-events: auto back later on to the iframe tags with Javascript, but that just resets everything back to the same behavior originally described.

Any ideas how to stop this "cutting off" behavior?

Answer 1

I know this is Necromancy but just sharing this for anyone who had this same issue. I decided to use multiplex instead. It actually let me scroll after. I was using it inside a Material UI FullScreen Dialog if that helps.