Screen jumps around on mobile with adplugin when >2 nth post ads are shown

support
12

I did some more testing of my own.

I created a blank 300px high DIV and appended it to every 6th post. It made no difference if it was post:before or post:after

api.decorateWidget('post:after', helper => {
  let post = helper.getModel();
  if (post.get('post_number') % 6 === 0) { 
      return helper.rawHtml('<div class="my_mobile_below_nth_post">300px div</div>');       
  };
});

Even with a blank div, the jumpiness still occurred on mobiles.
Now i’m not in any way an expert, but my suspicion is that the when the server tries to server a new batch of posts it calculates post heights before rendering.

It seems that only once the posts are delivered that the api.decorateWidget script kicks in, adding another 300px to the height of the content that was appended to the post stream. The browser then tries to compensate for this overall extra height, jumping the “view” forward an additional 300px.

Some other interesting notes:

  • the issue does not seem to happen in the Chrome iPhone simulator.
  • increasing the Nth number to something above around 15 seems to give the browser time to compensate for the new div height of the batch of posts that are loaded. In some threads that I tested, significantly reducing the jumpiness.

It would seem the only real solution would be for a dedicated post container to be added instead of relying on post.decorateWidget. This, as @codinghorror alludes to, is probably what requires major engineering time.

I’ve analysed traffic to my site and about 55% is from mobile phones; not being able to serve ads to them is obviously having a significant effect on revenue and therefore the viability of the community. My 15+ post workaround helps and I’m going to try to server GPT ads that refresh themselves.

Thankyou @neil and @joffreyjaffeux for looking into it, it’s appreciated.

8 Likes