Paul Masson Paul Masson - 5 months ago 31
HTML Question

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.

Answer

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' );

}