[css] how to properly display an iFrame in mobile safari

This only works if you control both the outside page and the iframe page.

On the outside page, make the iframe unscrollable.

<iframe src="" height=200 scrolling=no></iframe>

On the iframe page, add this.

<!doctype html>
...
<style>
html, body {height:100%; overflow:hidden}
body {overflow:auto; -webkit-overflow-scrolling:touch}
</style>

This works because modern browsers uses html to determine the height, so we just give that a fixed height and turn the body into a scrollable node.

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to iframe

Getting all files in directory with ajax YouTube Autoplay not working Inserting the iframe into react component How to disable auto-play for local video in iframe iframe refuses to display iFrame onload JavaScript event YouTube iframe embed - full screen Change New Google Recaptcha (v2) Width load iframe in bootstrap modal Responsive iframe using Bootstrap

Examples related to mobile-safari

disable viewport zooming iOS 10+ safari? iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? HTML5 Video tag not working in Safari , iPhone and iPad CSS background-size: cover replacement for Mobile Safari Setting format and value in input type="date" Mobile overflow:scroll and overflow-scrolling: touch // prevent viewport "bounce" How to check if an app is installed from a web-page on an iPhone? Is Safari on iOS 6 caching $.ajax results? How to launch Safari and open URL from iOS app Simplest way to detect a pinch