Bug 196731 – clip-path rendering together with transform:matrix3d not Rendering

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Krisztian]

Using clip-path:polgyon  css settings together with transform:matrix3d()  will break rendering of elements in Safari Browser.  Tested Version 12.1 (14607.1.40.1.4)  and RC Version 12.2 (...79) 

Made a CodePen Example:  https://codepen.io/themepunch/pen/pBNzpY
This Example works fine in Chrome and Firefox but not working on Safari any more.   Previous version of Safari (Pre version of 12.1) worked smooth and fine ! 

Hope you guys find a solution. We have over 4 Million Customers / Users going to have issues with it in our Plugin.

Cheers,

Krisztian from ThemePunch

[Simon Fraser (smfr)]

Looks like dynamic updates fail unless something else triggers a compositing update.

[Radar WebKit Bug Importer]

<rdar://problem/49748830>

[Jack Doyle]

Yep, here's another test case that clearly shows the problem: 
https://codepen.io/GreenSock/pen/f71dd9859235aaf4ade113e9ab4cbf8d?editors=0010

This also seems to affect CSS-based transitions/animations.

[Simon Fraser (smfr)]

We get StyleDifference::RecompositeLayer but fail to set the setNeedsCompositingGeometryUpdate bit in RenderLayerCompositor::layerStyleChanged

[bdc]

Created attachment 383558 [details]
clip-path doesn't update

After 2s, the triangle created with clip-path is supposed to be updated, but it won't repaint until you resize the browser or manually force a reflow. There's no need to apply a transform to trigger the issue.

[Simon Fraser (smfr)]

https://codepen.io/GreenSock/pen/f71dd9859235aaf4ade113e9ab4cbf8d?editors=0010 and https://codepen.io/themepunch/pen/pBNzpY both work for me in recent Safari Tech Preview.

The attachment shows a different issue.

[Simon Fraser (smfr)]

This bug is fixed. I spawned bug 204204 for the issue noted in the attachment (which doesn't involve any compositing layers).