Documentation pages with iframe unreadable on iOS

[paulmasson]

Description of the problem

Several documentation pages currently have an iframe used to display the browsers in docs/scenes/ (bones-browser, geometry-browser, material-browser). These pages cannot be read on iOS because the iframe grows continuously.

One fix is to add the iOS workaround from examples/index.html to each of the affected files. I have done this for BoxGeometry as an example, but this is only a partial fix. When viewing documentation pages through docs/index.html, the rotating cube appears when the file is first loaded but does not appear when subsequently selected. This problem after the fix affects Safari desktop and mobile, as well as Firefox mobile, but not Firefox and Chrome desktop. Reloading the page does display the rotating cube again but this is hardly desirable behavior.

Is there a better way to address this issue?

Three.js version

• [ ] Dev
• [x] r78
• [ ] ...

  Browser

• [ ] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer
• [x] Mobile Safari

  OS

• [ ] All of them
• [ ] Windows
• [ ] Linux
• [ ] Android
• [x] IOS

  Hardware Requirements (graphics card, VR Device, ...)

[leewz]

The iframe keeps growing because iOS increases the iframe to fit its contents (including the canvas), and then the frame source resizes the canvas (when animating a frame?) to fit the window, which causes iOS to (...). I suspect that iOS also adds a margin/padding/border to something, which is why resizing the canvas made it a little bigger than the window. If so, removing that would also fix the issue.

• Beside fixing dimensions + scrolling="no", I've also used position: fixed on the canvas element, which MIGHT have kept iOS from counting it in "content size".
• While trying the position: fixed solution, I once had only horizontal growth, which turned out to be due to a div with width: 100% and padding: 5px.

Solving it by getting rid of or accounting for the extra pixels, or by position: fixed, means the parent page doesn't need to do anything special. In particular, the parent won't need absolute units to set the child's dimensions.

[mrdoob]

I thought we added a workaround for that already.

https://github.com/mrdoob/three.js/blob/dev/docs/api/geometries/BoxBufferGeometry.html#L21-L31

Is not working anymore?

Maybe the workaround should sit in these files instead?

https://github.com/mrdoob/three.js/blob/dev/docs/scenes/bones-browser.html https://github.com/mrdoob/three.js/blob/dev/docs/scenes/geometry-browser.html https://github.com/mrdoob/three.js/blob/dev/docs/scenes/material-browser.html

[paulmasson]

The fix is working fine. Forgot to close this.

[leewz]

I'm just suggesting a child-side fix, in response to:

Is there a better way to address this issue?

[paulmasson]

@leewz didn't mean to be abrupt with you. We had a fuller discussion in the course of ironing out the details of the related pull request #9196. Hopefully Apple will fix this problem themselves one day.

[leewz]

Don't worry, I'm not bothered.

I checked the other discussion (and linked patches) beforehand to see if it mentioned the cause and if y'all considered a child-side fix.

IMO, the ideal fix would be child-side. The iframe grows infinitely because iOS Safari and the child page disagree on whether the iframe fits its contents. That means, on iOS, the child's resizing somehow makes the contents bigger than the window. That could be a legitimate bug in the child's code, and the parent pays the cost here.

[mrdoob]

IMO, the ideal fix would be child-side. The iframe grows infinitely because iOS Safari and the child page disagree on whether the iframe fits its contents. That means, on iOS, the child's resizing somehow makes the contents bigger than the window. That could be a legitimate bug in the child's code, and the parent pays the cost here.

The solution you're proposing is basically not listening for the resize event in the child. Unfortunately window.innerWidth and window.innerHeight is incorrect when inside an iframe on iOS. This means that, the frame will incorrectly grow at least once.

[leewz]

AFAIK, the iframe only grows if there is a change in size of window content. If there is no JS resize at all, there wouldn't be a first growth.

The solution I use myself is position: absolute, which somehow makes the canvas not count toward the size of the window content.

The potential solutions I have in mind are:

• Use canvas.innerHeight instead.
• Set margin, padding, and border to 0, to see if one of those are screwing things up.
• Set box-sizing to something else. The canvas's 100% might not consider window padding.

[mrdoob]

These were my findings 2 years ago: https://twitter.com/mrdoob/status/512424678162706432