Space Vatican

Ramblings of a curious coder

On Mobile Safari and Iframes

For posterity, in the hope it saves someone a few minutes of that time: Safari on iOS does some really weird shit when it comes to sizing iframes.

The setup was a page embedding an iframe with fixed height and width 100%, inside that iframe was a slick carousel. When viewed on Safari on an iPad (but nowhere else) the carousel appeared to be resizing back and forth in a crazy flicker-fest. If the content of the iframe was loaded directly then it was fine, and the iframe version was fine if the iframe width was set to a fixed size (eg 1000px).

A Stack Overflow post contained the answer: mobile Safari resizes iframes to the full size of their content. Slick works by having a very wide div with all the slides in it with overflow set to hidden, so the iframe resizing itself defeats the purpose entirely. Worse, slick reacts to window size changes by adjusting the size of its elements which causes the size of the great big scroll area div to change, which causes Safari to change the window size - repeat ad nauseam.

As promised by stack overflow, setting

  width: 1px;
  min-width: 100%;

on the element containing the carousel fixed things.