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
Looks like dynamic updates fail unless something else triggers a compositing update.
<rdar://problem/49748830>
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.
We get StyleDifference::RecompositeLayer but fail to set the setNeedsCompositingGeometryUpdate bit in RenderLayerCompositor::layerStyleChanged
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.
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.
This bug is fixed. I spawned bug 204204 for the issue noted in the attachment (which doesn't involve any compositing layers).