iscroll on iphone: visual distortions. I suspect it's hardware related?

Question

I wrote a JQM web app for Android and iPhone that runs in a custom native container that comes with a bunch of vendor libraries, including a custom version of iScroll. Recently, we upgraded the libraries from the vendor, including iScroll. Now, iPhone users are seeing visual distortion under certain conditions (screenshot: https://i.stack.imgur.com/mCUyB.png). The distortion correct themselves after scrolling.

Symptoms:

• horizontal lines are being drawn on the right of the screen
• Elements in the iscroll div are stretching past the right hand side. (Notice the divs has round edges on the left side, but not on the right. This also corrects itself after scrolling.

When both of these conditions are met, it triggers the distortion:

• After downloading a larger dataset, causing more DOM elements to be attached to the iscroller
• When the user navigates backwards. Essentially, when JQM page and its attached elements go from hidden to visible.

CSS code of the div iscroll:

element.style {
    -webkit-transition: -webkit-transform 0ms;
    transition: -webkit-transform 0ms;
    -webkit-transform-origin: 0px 0px;
    -webkit-transform: translate3d(0px, -131px, 0px) scale(1);
}

A few more observations:

• I suspect the iscroll is because the previous iscroll version did not use -webkit-transform.
• on iPhone, -webkit-transform: translate3d is hardware accelerated.
• the distortion is only on iPhone, not on Android.

Not sure what other information I should provide. I could provide the code for the iscroll, but it's 800 lines of code.

This is my first post here. Be Gentle.

Answer 1

I was having some issues with iScroll 5 where images and even text would get distorted when scrolling to some items (works fine on browsers but fails on iPhones/iPads).

I have 4 tabs with one scroll each. The first one works fine (maybe because it has less items?), but the others fail when scrolling to the last item or so.

After some tests, I noticed that removing the CSS transition on the container (with the #id that I'm using to call the iScroll), solved the problem. I'm still keeping the transitions though. I just had to move it to a different container down on the DOM tree. (on my case it was just a fade in effect when the scroll finishes loading).

It's a really strange bug... Hope it helps you solve your problem too.