iOS Safari image rendering issue

问题:

I've been experiencing some very strange behavior in Safari on iPad.

There's a large image that gets rescaled and position on orientation change. This is probably beside the point, but it's fine in portrait and "broken" in landscape. Here's how it's broken:

There's a large stripe running horizontally through it. Applying some CSS, I can see that I'm actually looking at the container element through the stripe (usually about 40 pixels high, and running horizontally across the image).

To make it even more baffling, here's what happens when I try to inspect the code by hooking it up to a desktop and using desktop Safari's web inspector: I inspect the element or even a nearby element and the image renders correctly, as if some event has been fired on the iPad. Weird.

Additionally, the image will usually render correctly after I simply touch the page, without (as far as I know) firing an event that my JS is listening for.

Oh and this started happening after I updated iOS from, I think, 6.0 to 6.1.

I'm on iOS 6.1.2 with Safari 8536.25.

I'm at a complete loss. Can anyone point me in the right direction here?

回答1:

And the answer, found from this question and anwser:

iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

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

I don't get it, but it works.