Bug 180442 – REGRESSION (Safari 11): feColorMatrix with large matrix component doesn't render

• Component: SVG
• Status: NEW

[Alec Miller]

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.

[Alec Miller]

Created attachment 328493 [details]
Gray Rectangle w/Red Drop Shadow using feComposite

[Radar WebKit Bug Importer]

<rdar://problem/35919406>

[Simon Fraser (smfr)]

Created attachment 328764 [details]
Simpler testcase

[Simon Fraser (smfr)]

Seems to be an issue with the feColorMatrix. If I remove the "values" param, it works in WebKit.

[Simon Fraser (smfr)]

Bug does not occur if we use vImage for feColorMatrix.

[Simon Fraser (smfr)]

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.

[Simon Fraser (smfr)]

Underlying bug is rdar://problem/35926394.

[Alec Miller]

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.

[Alec Miller]

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.

[Simon Fraser (smfr)]

I found that it works with any value 127 and below.

[Simon Fraser (smfr)]

This is actually an overflow issue in feColorMatrix effectApplyAccelerated() when computing the matrix to give to vImage, with a divisor of 256.

[Ahmad Saleem]

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!