CODEWITHSUNDEEP
javascriptioscsscordova
user1031947
user1031947

Reputation: 6664

Images are not rendered until after scrolling stops on iOS (PhoneGap)

I am working on a PhoneGap web app for iOS.

I have an implemented an infinite list, where as you scroll down the page, new elements are loaded from the server and added to the bottom of the page.

Each element added to the page includes images that are loaded asyncronously.

However, the images do not actually appear until after scrolling stops. This makes things appear sluggish, even though they are not - ie until I remove my finger from the device.

Does anyone know of a workaround for this problem?

Upvotes: 1

Views: 1458

Answers (3)

Charlie Tupman
Charlie Tupman

Reputation: 529

This funky work around for safari will do the trick for you:

*:not(html) {
   -webkit-transform: translate3d(0, 0, 0);
}

This will add the translate property to all elements causing the IOS browser to render your off screen elements and give you a silky smooth native like feel. Remember to check your functionality as it can mess with positioning of some elements. If if does add them to the 'not' list e.g:

*not(html, button, img...

Upvotes: 3

CountingStacks
CountingStacks

Reputation: 267

I've noticed the same problem while building my application. The UI consists of many images and it only appears to render what's currently on the screen and when you go to scroll, everything else won't render until it's finished scrolling.

A solution that worked for me was adding an overflow: auto; property to the containers in your layout. When I add it, everything renders and there are no problems when you scroll.

Upvotes: 0

Martín Alcubierre
Martín Alcubierre

Reputation: 4387

This cannot be avoided. Image rendering on webkit-gradient IOS is executed in a dedicated US thread with real time priority.

https://news.ycombinator.com/item?id=3316383

Upvotes: 0

Related Questions