How to Fix Iframe Resizing Issues on iOS Safari: A Workaround for Consistent Display?

Iframe Size on iOS: Fixing Safari's Resizing Anomaly

In certain scenarios, iframes containing excessive content may display incorrectly on iOS devices. Unlike other browsers that allow content overflow and scrolling, Safari on iOS automatically resizes the iframe to fit its contents.

This behavior defies the intention of controlling iframe size through CSS. To address this issue and ensure consistent iframe sizing across platforms, it's necessary to implement a workaround.

Solution: Overflow Containment

By adding an additional div element with specific CSS properties, you can force the iframe to retain its intended dimensions and enable overflow scrolling. Here's the modified HTML code:

<code class="html"><div class="frame_holder">
  <div class="wrapper">
    <iframe class="my_frame">
      // The content
    </iframe>
  </div>
</div></code>

And the corresponding CSS:

<code class="css">.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}</code>

The .wrapper div introduces overflow: auto;, which enables vertical scrolling within the wrapping div, and -webkit-overflow-scrolling: touch;, a webkit-specific property that optimizes scrolling performance on iOS devices.

With this workaround, the iframe's size will be preserved, providing a consistent and appropriate user experience on both iOS and non-iOS devices.

The above is the detailed content of How to Fix Iframe Resizing Issues on iOS Safari: A Workaround for Consistent Display?. For more information, please follow other related articles on the PHP Chinese website!