Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Three.js embedded in iframe grows endlessly in iOS 8/9

If a file containing Three.js is embedded in a web page using an iframe

<iframe id=viewer src=document-with-threejs.html></iframe>

then the iframe grows endlessly in size when the page is viewed in Mobile Safari. This behavior has not been corrected in iOS 9 released today. This question and answer are posted to make the information easily accessible to web searches.

like image 462
Paul Masson Avatar asked Sep 16 '15 20:09

Paul Masson


Video Answer


1 Answers

The fix for this behavior is found in http://threejs.org/examples/index.html. New and improved version as of 3 July 2016:

var viewer = document.getElementById( 'viewer' );

// iOS iframe auto-resize workaround

if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

    viewer.style.width = getComputedStyle( viewer ).width;
    viewer.style.height = getComputedStyle( viewer ).height;
    viewer.setAttribute( 'scrolling', 'no' );

}
like image 182
Paul Masson Avatar answered Oct 08 '22 11:10

Paul Masson