I’m displaying a view with multiple full-sized (768×1024) images on iPad web application. Images are inside separate divs floating next to each other. These images are preloaded.
The transition between images are done with -webkit-transform:translate3d() which should be the most efficient way when considering performance. The transition is done for the whole body element. But I can’t say whether rendering is performed through copy scroll, tile scroll or full redraw.
However, when I swipe between the images, rendering of a new image isn’t fully working – right side of the image (last ~20%) flickers. This happens only when image is displayed in first time, after that there’s no problems.
What I’ve already tried:
- both full-sized images (~200kb each) and lo-res (~30kb each) as background-images
- like above, but as img elements
- smalle thumbnail images streched as full-sized with background-size:cover (very bad performance)
- single-colored images.
- displaying whole content at once by scaling down it in single view and then re-scaling it as 100%
None of these work. I also tried serving images through offline application cache, but I don’t this issue has that much to do where images are loaded from, but purely as a rendering issue.
I also checked whether I’m having CSS properties that could affect on performance (eg. filters, positioning or overflow issues). There shouldn’t be anything that would cause penalty.
At the moment, only working solution would be not to have images at all since there is no rendering issues without images. And the display images after the transition is completed. This, however, is only the second (and last) solution.
You may need to add “-webkit-transform:translate3d(0,0,0)” to the images themselves.