219458 2020-12-02 15:49:35 -0800 clip-path is applied to wrong element when referencing SVG clipPath via url() 2022-08-15 10:48:36 -0700 1 1 1 Unclassified WebKit Compositing Safari Technology Preview Unspecified Unspecified RESOLVED CONFIGURATION CHANGED CanvaBug, InRadar P2 Normal --- 126207 1 xidorn-webkit webkit-unassigned koivisto sabouhallawa simon.fraser smoley webkit-bug-importer zalan oldest_to_newest 1711491 0 415255 xidorn-webkit 2020-12-02 15:49:35 -0800 Created attachment 415255 testcase Steps to reproduce: 1. open the attached testcase 2. drag the image around Expected behavior: The opaque circle close to the middle of the image should be fixed. Actual behavior: The opaque circle is moved with the image. It works as expected on Firefox and Chrome. This is causing issue for Canva's editor on Safari. 1711492 1 xidorn-webkit 2020-12-02 15:52:03 -0800 It seems that using <basic-shape> doesn't have the same issue. 1712502 2 smoley 2020-12-07 11:00:04 -0800 This reproduces for me on Safari 13.1.3 - STP 116 (14.1). 1712503 3 webkit-bug-importer 2020-12-07 11:01:06 -0800 <rdar://problem/72054936> 1891375 4 simon.fraser 2022-08-15 10:48:36 -0700 I cannot reproduce this in STP 151 or a recent Safari. 415255 2020-12-02 15:49:35 -0800 2020-12-02 15:49:35 -0800 testcase safari-clip.html text/html 1152 xidorn-webkit PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KICAuY29udGFpbmVyIHsKICAgIHBvc2l0aW9uOiByZWxh dGl2ZTsKICAgIGxlZnQ6IDMwMHB4OwogICAgdG9wOiAzMDBweDsKICB9CiAgLndyYXBwZXIgewog ICAgY2xpcC1wYXRoOiB1cmwoI2EpOwogICAgd2lkdGg6IDIwMHB4OwogICAgaGVpZ2h0OiAyMDBw eDsKICB9CiAgLmltZyB7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB0b3A6IC0zMDBweDsK ICAgIGxlZnQ6IC0zMDBweDsKICAgIHdpZHRoOiAxMDAwcHg7CiAgICBoZWlnaHQ6IDEwMDBweDsK ICAgIGJhY2tncm91bmQ6IHJlcGVhdGluZy1yYWRpYWwtZ3JhZGllbnQoeWVsbG93LCBibHVlIDIw JSk7CiAgfQogIC5iZyB7CiAgICBvcGFjaXR5OiAuMjsKICB9Cjwvc3R5bGU+CjxkaXYgY2xhc3M9 ImNvbnRhaW5lciI+CiAgPGRpdiBjbGFzcz0iaW1nIGJnIj48L2Rpdj4KICA8ZGl2IGNsYXNzPSJ3 cmFwcGVyIj4KICAgIDxkaXYgY2xhc3M9ImltZyI+PC9kaXY+CiAgPC9kaXY+CjwvZGl2Pgo8c3Zn IHZpZXdCb3g9IjAgMCAyMDAgMjAwIj4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iYSI+CiAg ICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIi8+CiAgICA8L2NsaXBQYXRoPgog IDwvZGVmcz4KPC9zdmc+CjxzY3JpcHQ+CiAgY29uc3Qgb2Zmc2V0ID0geyB4OiAwLCB5OiAwIH07 CiAgbGV0IGRyYWdnaW5nID0gZmFsc2U7CiAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91 c2Vkb3duJywgZSA9PiB7CiAgICBkcmFnZ2luZyA9IHRydWU7CiAgfSk7CiAgZG9jdW1lbnQuYWRk RXZlbnRMaXN0ZW5lcignbW91c2V1cCcsIGUgPT4gewogICAgZHJhZ2dpbmcgPSBmYWxzZTsKICB9 KTsKICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZW1vdmUnLCBlID0+IHsKICAgIGlm IChkcmFnZ2luZykgewogICAgICBvZmZzZXQueCArPSBlLm1vdmVtZW50WDsKICAgICAgb2Zmc2V0 LnkgKz0gZS5tb3ZlbWVudFk7CiAgICAgIGZvciAoY29uc3QgaW1nIG9mIGRvY3VtZW50LnF1ZXJ5 U2VsZWN0b3JBbGwoJy5pbWcnKSkgewogICAgICAgIGltZy5zdHlsZS50cmFuc2Zvcm0gPSBgdHJh bnNsYXRlKCR7b2Zmc2V0Lnh9cHgsICR7b2Zmc2V0Lnl9cHgpYDsKICAgICAgfQogICAgfQogIH0p Owo8L3NjcmlwdD4K