Keynote HTML export looks awful in mobile portrait (found bug in js)

Originator:hyperblazer
Number:rdar://48748513 Date Originated:10/03/2019
Status:Open Resolved:
Product:Keynote Product Version:8.3
Classification:Bug Reproducible:Always
 
Summary:

When viewing the HTML export of a Keynote presentation on a mobile device in portrait mode, only a fraction of the presentation is visible (tried this with multiple presentations, multiple (WebKit-based) browsers, multiple devices, and the iOS simulator). This is improved by switching to landscape and back to portrait, which means that the portrait presentation depends on whether you've visited landscape.

The bug is in the exported DisplayManager.js, specifically in the line:

setElementPosition(this.infoPanelIcon, this.usableDisplayHeight - kInfoPanelButtonHeight, this.usableDisplayWidth - kInfoPanelButtonWidth - 5, kInfoPanelButtonWidth, kInfoPanelButtonHeight)

The info panel button sizes aren't defined, so the layout function exits before doing the rest of its work. Removing this statement fixes.

Steps to Reproduce:

1. From Keynote (for macOS): File -> Export to -> HTML. Export.
2. Place the resulting directory (called, e.g., `bugtest`) somewhere where it can be served to the mobile browser. Here, I'll use jekyll to serve it (convenient for my use case).
3. Open the slides  (e.g., `bugtest/index.html`) in Safari on a mobile device in portrait mode.

Additionally, switch portrait -> landscape -> portrait to show that portrait is different after a landscape than before it.

To reproduce the specific attached images:

1_portrait : after step 3 above (using iOS Simulator as iPhone XR, 12.1)
2_landscape : rotate to landscape mode after 1_portrait
3_portrait : rotate back to portrait mode after 2_landscape
4_fixed : comment out the javascript line mentioned above; open/reload in portrait mode

Expected Results:

Full slide visible when viewed in mobile Safari.

Portrait mode should look the same before or after a switch to landscape.

Actual Results:

Fraction of slide visible in mobile Safari with first loaded in portrait mode. 

Portrait mode looks different after a switch to landscape.

Version/Build:

Keynote 8.3 (5989)

Configuration:

Simplest test occurs when viewing in iOS simulator when served by jekyll.

Also occurs when Keynote is embedded in iframe, viewed iPhone XS, XR, or iOS Simulator, served with Apache.

Comments


Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!