Bug 187235

Summary: Glitch during animation
Product: WebKit Reporter: Roland Soos <roland>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, simon.fraser, zalan
Priority: P2    
Version: Safari 11   
Hardware: All   
OS: macOS 10.13   
Attachments:
Description Flags
Screen recording of the glitch none

Description Roland Soos 2018-07-01 12:00:17 PDT 
Created attachment 344055 [details]
Screen recording of the glitch

Steps to reproduce:
1. Open https://smartslider3.com/full-screen-divi-slider/
2. Switch slides on the right side of the slider with the circled images.

Screen recording attached to the bug.

Happens in:
- Safari Version 11.1.1 (13605.2.8)
- Safari Release 59 (Safari 12.0, WebKit 13606.1.21)

Works fine in
- Chrome
- Firefox
- Edge, IE 11
Comment 1 Simon Fraser (smfr) 2018-07-02 11:09:59 PDT 
This looks like a z-ordering layer intersection issue. Do any of the transforms you're using have 3D components?
Comment 2 Roland Soos 2018-07-02 12:13:12 PDT 
(In reply to Simon Fraser (smfr) from comment #1)
> This looks like a z-ordering layer intersection issue. Do any of the
> transforms you're using have 3D components?


Yes, I have.
Leafs: Y 20 -> 0, Rotation Y 5deg -> 0deg
Comment 3 Simon Fraser (smfr) 2018-07-02 17:05:39 PDT 
So this is a result of the intersection of 3d-transformed layers, which the CSS spec does not correctly deal with yet.