| Summary: | REGRESSION (Safari 11): feColorMatrix with large matrix component doesn't render | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Alec Miller <alecazam123> | ||||||||
| Component: | SVG | Assignee: | Simon Fraser (smfr) <simon.fraser> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, rniwa, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 11 | ||||||||||
| Hardware: | Unspecified | ||||||||||
| OS: | Unspecified | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 328493 [details]
Gray Rectangle w/Red Drop Shadow using feComposite
Created attachment 328764 [details]
Simpler testcase
Seems to be an issue with the feColorMatrix. If I remove the "values" param, it works in WebKit. Bug does not occur if we use vImage for feColorMatrix. I think there's numeric overflow when using vImage. The 255 in the matrix is pretty bogus; you can get the desired effect with a 1 in there. Underlying bug is rdar://problem/35926394. The 255 isn't bogus and using 1 there is not the same thing. That is generating a hard mask. 1/255 is the smallest value, and that turns it into 1.0, and the value higher all scale and are clamped to 1.0. Only 0 produces 0. I mean if you use a 255/255 alpha shape as in you reduced test case, then sure the feColorMatrix of 1 works. But if you're trying to create a drop shadow from opacity 1/255 then you have to scale up the value by 255. That doesn't overflow in Chrome/Firefox, but appears to in WebKit. Is there any suggested workaround? The rdar tickets are opaque to anyone but Apple. I found that it works with any value 127 and below. This is actually an overflow issue in feColorMatrix effectApplyAccelerated() when computing the matrix to give to vImage, with a divisor of 256. I am able to reproduce this issue using attached "Simpler Testcase" in Safari 15.6 on macOS 12.5 and it does not show "Black" square / box behind Blue square like other browsers (Chrome Canary 106 and Firefox Nightly 105). Just wanted to share updated testing results. Thanks! |
Created attachment 328492 [details] Gray Rectangle w/Red Drop Shadow using feBlend My current guess is that feBlend must be broken in Safari 11. This content renders correctly in Chrome and Firefox, and did in Safari 10. This should be a gray rectangle with red drop shadow. In Safari, the shadows are missing from the Figma file, but are present for the Sketch file. Figma honors the blend settings on the effects via feBlend, but Sketch does not and uses feComposite. The Figma file should render correctly in Safari like it does in all other browsers.