41248

iframe content is displaying outside the iframe on iOS

Question:

Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:

<img alt="iframe overflowing on x-direction on iOS" class="b-lazy" data-src="https://i.stack.imgur.com/l0G8O.png" data-original="https://i.stack.imgur.com/l0G8O.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

How can I workaround this issue?

Answer1:

Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.

Answer2:

You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.

<a href="http://jsfiddle.net/RQBra/29/" rel="nofollow">http://jsfiddle.net/RQBra/29/</a>

basically, you wrap your iframe in a wrapper and give it some css:

#wrapper { position:relative; z-index:1; width:400px; height:400px; overflow:scroll; }

Answer3:

A workaround for your specific case is to replace the <iframe> by an <embed> element.

<embed src="..." type="text/html" width="400" height="400"></embed>

It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.

<a href="http://www.w3.org/wiki/HTML/Elements/embed" rel="nofollow">W3C</a>:

<blockquote>

The element represents an integration point for an external (typically non-HTML) application or interactive content.

</blockquote>

Answer4:

I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div

#wrapper { position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0); }

it's size will be relative to html body, than the viewportSizes may be as you wish the second row is handling flickering on Iframe click, happens in ios'...

Recommend

  • How to Load a RavenDB Document, constrained to a Collection, when not using default ID generation st
  • remove labels in flot
  • how to execute sql server stored procedure on php?
  • Storage::move giving “File not found at path:” Laravel with Ubuntu
  • Bootstrap ScrollSpy skips section when no more scrollable area
  • Prevent body from scrolling on mouswheel, but not the texarea
  • Implement JwtBearer Authentication in NSwag SwaggerUi
  • c++ regex_replace not doing intended substitution
  • How to render a pixel array most efficiently to a window in c++?
  • abstracting over a collection
  • blade.php method outputting it's result to the form
  • Find group of records that match multiple values
  • Calculate time difference in hh:mm:ss with simple javascript/jquery
  • TFS 2015 - Waiting for an agent to be requested
  • Redirect STDERR in OPEN pipe comand. Perl Linux
  • Remove changes from one element when event occurs on another element?
  • RxJava debounce by arbitrary value
  • Android Google Maps API v2 start navigation
  • D3 get axis values on zoom event
  • how to avoid repetitive constructor in children
  • Does it make sense to call System.gc() and Thread.sleep() when working on Bitmaps?
  • azure media services - The request body is too large and exceeds the maximum permissible limit
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Spark fat jar to run multiple versions on YARN
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • TFS: Get latest causes slow project reloading
  • How to set/get protobuf's extension field in Go?
  • Updating server-side rendering client-side
  • Javascript Callbacks with Object constructor
  • How to show dropdown in excel using jrxml (jasper api)?
  • ActionScript 2 vs ActionScript 3 performance
  • How to make Safari send if-modified-since header?
  • json Serialization in asp
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • python draw pie shapes with colour filled