I have a WebApp in which one of the pages uses an interactive canvas as well as another selector field. The two reflect each other so that you can change values using touch or by using the selector. The WebApp is responsive. When I'm displaying the page in one orientation on my iPad Pro (iOS 10.2.1), and flip to the other everything displayes properly. The touch selector works fine. However, if I use the dropdown input the canvas disappears. Touch events still work but the canvas is invisible. I can get it back by closing the app page and opening it again. This is repeatable. Timing does not seem to matter.
Using the debugger and a USB cable, I discovered that the canvas' 'style.visibility' was 'visible' but the canvas was acting like it was 'hidden'. If I toggle visibility to 'hidden' then back to 'visible' everthing works again. Simply setting visibility to 'visible' does not work; I have to toggle it. Given that 'style.visibility' is set to 'visible' in the app, this seem like a Safari bug.
I have other app pages that have a similar style, but it doesn't happen on them for some reason. I cannot duplicate this behavior on my iPhone, desktop Safari (using window resize or responsive design mode), or with Chome on the desktop or iPad. I also deploy this as a Codova app using the older Webview, and the problem appears with that as well. The app does not have an orientation change handler only a resize handler. In the case of an iPad orientation change, the handler does nothing except log the event.
I'm still working to see if I can narrow it down further.
Has anyone else seen this?