Changing iPad orientations and reloading causes display errors

[BryceAG]

With iPad iOS 10 and 11 (but not 9) if you go back a page, change the orientation, and go forward to the sim again it will not update the orientation.

Additionally, the interactive area for objects is not where the displayed object is.

closing and reopening safari, fully reloading the webpage, or changing the orientation ~4 times while the screen is still loaded will all fix the problem. Many websites, such as wikipedia, do not show this problem and update the orientation when reloading.

found while testing phetsims/qa#55

assigning to @ariel-phet to prioritize please

[ariel-phet]

@BryceAG @phet-steele can you let me know if this happens with other simulations, or just with CCK? Since in Joist, I am assuming all sims?

[BryceAG]

I haven't checked all of the sims, but confirmed that it happens with pendulum lab and projectile motion. I think it's safe to assume it happens for all of them.

[ariel-phet]

@BryceAG thanks. Good to know.

[ariel-phet]

@samreid I think this would be worth some investigation after CCK 1.0 is out the door. I am not too concerned by the issue, but we do see lots of organic examples of our sims used in both orientations.

I might also mark this for a quick discussion in dev meeting. For instance, on our iPad app the orientation is locked to landscape (which is what we design our sims for anyhow), and we have yet to see a complaint about that constraint. It seems a simple solution would be to always lock our sims to landscape mode for tablet style devices.

[pixelzoom]

@ariel-phet suggested:

It seems a simple solution would be to always lock our sims to landscape mode for tablet style devices.

I may not know what I'm talking about here... But since sims run in the browser, wouldn't this involve locking the browser to landscape mode? Is there even a way to do that? And if so, isn't that a bit rude, since it assumes the browser is being used solely to run PhET sims?

[pixelzoom]

10/26/2017 dev meeting:
JO: You can't lock the browser, but you can force the context to be locked. Would still be potentially buggy.
AP: For @samreid to investigate after CCK:DC is published. Don't look into workaround (eg locking orientation), let's fix the root problem.

[samreid]

@jonathanolson pointed out that the root problem is that the bounds are wrong. We should investigate this. We will not look into rotating the view, just looking into why the bounds are wrong.

[samreid]

This StackOverflow suggests we are seeing the effects of the back-forward cache, https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked

It seems we can detect when this happens and either (a) update the bounds or (b) refresh the entire sim. The latter seems more likely to address other corner cases that might crop up. The former seems more like a minimally invasive change but might have unexpected side effects.

[samreid]

On the other hand, I'm wondering if we might see onpageshow event.persisted in other contexts such as in our apps.

Also is it safe to call window.location.reload() in all of our contexts? I'm unfamiliar with that API or its ramifications.

[samreid]

Also, iOS "Reading Mode" is another context where this could have expected caching behavior.

[samreid]

My iPad3 is stuck on iOS 9.3.5, I'll try to work on this on Thursday.

[samreid]

I'll have to move this to Thurdsay Dec 7 or 14.

[samreid]

I'm not seeing the same problem on iPhone running iOS 11, perhaps it is reloading the whole page and hence getting the size right.

[samreid]

@oliver-phet and I cannot reproduce the problem on the iOS 10.3.3 iPad mini. The page gets reloaded each time.

We'll test the air 11.2 next.

[phet-steele]

@samreid before I ask what I'm going to ask, I should say I have not yet tested the above link. So:

If I were to play devil's advocate, I'd have to ask, "How does this affect the PhET App on iOS?". It's been desirable that when exiting the app and returning to it, that the sim remain as it were and NOT refresh. Note I'm not talking about exiting the sim within the app, I mean literally pressing the home button, visiting some other app, then coming back to the PhET App.

I have no way to test your proposed fix in the app, so I have to speculate now in place of a proper test. Would your fix cause the sim to reload when the app is returned to? I don't fully understand when "pageshow" events occur.

[phet-steele]

I suppose, if I were to draw conclusions with what I see in Mobile Safari proper, the sim does not reload when I leave the browser and return. This means it would probably be the same thing in the app?

[samreid]

Based on discussion in https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked I think the back-forward cache would not be used for the individual sim WebViews.

Update: on second thought, let's ask our iOS app developers if the same WebView is reused for different sims--that may trigger the cache.

@ariel-phet can you please ask the appropriate developer?

[ariel-phet]

@mattpen do you know the answer to @samreid question?

[jjohnson5253]

@samreid A new instance of a WKWebView (different than WebView which is deprecated) is created every time the user opens a sim. Whenever the user exits a sim (hits done button) the WebView is deleted and freed from memory.

So no, the same WKWebView is not reused for different sims.

[jjohnson5253]

Currently, on the iOS app, when switching from portrait to landscape or vice versa, the same issue occurs where the sim does not resize to fit the screen. @samreid Would your proposed fix remove this bug as well?

[samreid]

@samreid Would your proposed fix remove this bug as well?

No, that only applied to using the back/forward cache. Perhaps the WKWebView needs to be resized by the app?

[jjohnson5253]

Well, the WKWebView resizes correctly, and when opening other sites (non phet) the site resizes correctly. So it must have something to do with the simulation website code.

[samreid]

Well, the WKWebView resizes correctly, and when opening other sites (non phet) the site resizes correctly. So it must have something to do with the simulation website code.

We are following up with the iOS app bug in https://github.com/phetsims/phet-ios-app/issues/296

[phet-steele]

@samreid the link in #448 (comment) is working acceptably. Back to you to decide how to move forward.

[samreid]

Thanks, this is committed to joist master, and new deploys will pick it up. We'll continue with the app fixes in https://github.com/phetsims/phet-ios-app/issues/296, closing.