iOS 13 iframe click area broken after DOM manipulation

user_719718 0
Viewed 525

I'm experiencing some unusual behaviour on iPad in which the click area of elements on the page become offset from their actual rendered location.

This has only started since upgrading to iOS 13+, the behaviour is fine on iOS 12.

A few factors seem to be involved:

  • This only impacts content within an iframe.
  • The DOM must be manipulated such that the overall height changes.
  • Bizarrely, this seems to be broken across multiple browsers - tested in Safari, Chrome and Firefox.

An isolated example of it in action can be seen here https://codepen.io/labepiniimailwebtop/full/mddEpjP (if your iPad screen is too big such that there is no scrollbar when the page loads then simply make the image taller). Screen recording of the problem.

The code on the page (that loads within the iframe) is simply:

<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
Scroll down
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="https://placehold.it/200x600" />
<br />
<button>Click me</button>

<script>
$('button').on('click', function(){
    $('img').remove();
});
</script>

Anyone come across the same problem and any ideas on a fix? I'm imagining this is an issue that needs to be fixed by Apple but wonder in the meantime what I can do to ensure things keep working.

ios13 iframe
1 Answers

I found a hack that fixes this issue. Making the iframe scroll up to the top seems to make the click areas reposition correctly. So you can add window.scrollTo({top: document.body.scrollTop}); after the element is removed.

I forked your codepen to demonstrate the fix: https://codepen.io/avrame/pen/xxxBqWY

user_4891570
Related