I'm currently working on an app for Android & iOS with Sencha Touch.
The problem occurs occasionally on Safari OSX (latest versions) and more frequently on iPhones.
On a page/view called "product detail page" we have a slideshow with rectangular product pictures in JPG format, 100vw by 100vw large. The images themselves are around 800 by 800 pixels big, so not really large. Sencha Touch implements the slides using div background images. No anchor tags at all are involved.
The issue is that often - on a product detail page of which the images are not yet in the cache - the first product picture to be displayed is being loaded from the server (Amazon S3) - I can see that in the network tab in the devtools - but displayed completely white. Until I move the image slightly or use the console to change the style of the div, e.g. changing the width from 100vw to 100%.
I hacked a "fix" for this on the desktop by calling a timeout function after 1 second that will change the width as described, and that seems to fix the issue on Safari desktop (in the iPhone emulation). But in the iPhones the issue still occurs and regardless of my not-so-satisfying hack I'd like to understand what's going wrong here.
Why is the image only being shown after a layout change?
The same issue sometimes occurs with regular <img> images on our website under Safari on iPhones...
