On https://www.edityouraudio.com, we use Adsense to monetize our audience in order to keep our service free for all non-intensive users.
This had been a very long time since my layout was sometimes broken, with the footer not being stuck on the bottom of the page, leading to a very ugly layout like this one (with the white bar at the bottom).

This is because adsense is injecting

 

style="height: auto!important;min-height: 0px!important" 

into your main div 😱

Solving the problem with MutationObserver

Mutation observer to the rescue !

constructor(props) {
  super(props);
  this.mainRef = React.createRef();
  this.adSenseInjectorObserver = null;
}

componentDidMount() {
  if (!this.adSenseInjectorObserver && this.mainRef) {
    this.adSenseInjectorObserver = new MutationObserver((mutations, observer) => {
      this.mainRef.current.style.removeProperty('min-height');
      this.mainRef.current.style.removeProperty('height');
    });
    this.adSenseInjectorObserver.observe(this.mainRef.current, {
      attributes: true,
      attributeFilter: ['style'],
    });
  }
}

and

render() {
  return (
    <main ref={this.mainRef}>
      {this.props.children}
    </Main>
  );
}

This will, on component mount, define an observer that will reset the height and min-height everytime it is set directly by Adsense.

Don't forget to disconnect the observer on unmount also.

  componentWillUnmount() {
    if (this.adSenseInjectorObserver) {
      this.adSenseInjectorObserver.disconnect();
      this.adSenseInjectorObserver. = null;
    }
  }

Hire me remotely!

My name is Martin Ratinaud and I’m a senior software engineer and remote enthusiast, contagiously happy and curious.
I create websites, like this one for staking your crypto
I create bots to aggregate data and build Remote Family with them.
I create Backoffices and internal tools for marketers and growth specialists.
I also create chrome extensions and electron apps to sort your paper with AI.
All this in NodeJs and React which I love very much.

Check my LinkedIn and get in touch!