Bug 196731 - clip-path rendering together with transform:matrix3d not Rendering
Summary: clip-path rendering together with transform:matrix3d not Rendering
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 12
Hardware: All iOS 12
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-04-09 05:56 PDT by Krisztian
Modified: 2019-11-14 15:17 PST (History)
10 users (show)

See Also:


Attachments
clip-path doesn't update (565 bytes, text/html)
2019-11-14 09:55 PST, bdc
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Krisztian 2019-04-09 05:56:24 PDT
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
Comment 1 Simon Fraser (smfr) 2019-04-09 13:49:45 PDT
Looks like dynamic updates fail unless something else triggers a compositing update.
Comment 2 Radar WebKit Bug Importer 2019-04-09 13:54:17 PDT
<rdar://problem/49748830>
Comment 3 Jack Doyle 2019-04-09 21:18:30 PDT
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.
Comment 4 Simon Fraser (smfr) 2019-04-10 09:47:59 PDT
We get StyleDifference::RecompositeLayer but fail to set the setNeedsCompositingGeometryUpdate bit in RenderLayerCompositor::layerStyleChanged
Comment 5 bdc 2019-11-14 09:55:10 PST
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.
Comment 6 Simon Fraser (smfr) 2019-11-14 15:07:37 PST
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.
Comment 7 Simon Fraser (smfr) 2019-11-14 15:17:01 PST
This bug is fixed. I spawned bug 204204 for the issue noted in the attachment (which doesn't involve any compositing layers).