Flickering comeback on IOS9

aroncal commented 9 years ago

Since IOS was updated to versión 9 (actually I'm on 9.0.2 with iPhone 5S) the ugly flickering effects came back to orbicular. I have read here and there about Safari WebView bugs on IOS9; might be related with this.

Any thoughts?

stakach commented 9 years ago

I'll check it out!

stakach commented 9 years ago

I can only see it in the counterclockwise direction - is that how you have it configured?

stakach commented 9 years ago

By slowing the animations on the demo down to 30seconds I am seeing that

orbicular > div.co-circle.co-full > div.co-fill {}

this selector is not animating when rotating counterclockwise. Weirdest issue ever.. I've so far had no luck making it animate. I have however been able to prevent the clockwise direction from animating, which doesn't really help.

I assume webkit is trying to save processing by not animating hidden elements and is not aware of the clip css directive. It works fine if I use clip-path however that only works in safari at the moment

The behaviour is the same for desktop safari and iOS and the rotation is applied once the animation completes

aroncal commented 9 years ago

Yes i see it mostly in counterclockwise mode, but i have also seen it slightly in normal mode.

So you say i could try something like this in my SCSS?:

.platform-ios9 orbicular {
    &> div.co-circle {
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);

        &> div.co-fill {
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
        }
    }
}

I have tried it and still flickering happens. Safari Web Inspector complains about "polygon(...)" not being a compatible value for the "clip-path" property...

cotag / orbicular

Flickering comeback on IOS9 #28