Bug 180442 - REGRESSION (Safari 11): feColorMatrix with large matrix component doesn't render
Summary: REGRESSION (Safari 11): feColorMatrix with large matrix component doesn't render
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 11
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-12-05 13:37 PST by Alec Miller
Modified: 2018-01-25 16:44 PST (History)
4 users (show)

See Also:


Attachments
Gray Rectangle w/Red Drop Shadow using feBlend (1.07 KB, image/svg+xml)
2017-12-05 13:37 PST, Alec Miller
no flags Details
Gray Rectangle w/Red Drop Shadow using feComposite (1.42 KB, image/svg+xml)
2017-12-05 13:37 PST, Alec Miller
no flags Details
Simpler testcase (1.10 KB, image/svg+xml)
2017-12-07 17:52 PST, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Alec Miller 2017-12-05 13:37:04 PST
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.
Comment 1 Alec Miller 2017-12-05 13:37:38 PST
Created attachment 328493 [details]
Gray Rectangle w/Red Drop Shadow using feComposite
Comment 2 Radar WebKit Bug Importer 2017-12-07 14:32:38 PST
<rdar://problem/35919406>
Comment 3 Simon Fraser (smfr) 2017-12-07 17:52:02 PST
Created attachment 328764 [details]
Simpler testcase
Comment 4 Simon Fraser (smfr) 2017-12-07 18:18:59 PST
Seems to be an issue with the feColorMatrix. If I remove the "values" param, it works in WebKit.
Comment 5 Simon Fraser (smfr) 2017-12-07 18:38:37 PST
Bug does not occur if we use vImage for feColorMatrix.
Comment 6 Simon Fraser (smfr) 2017-12-07 19:09:22 PST
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.
Comment 7 Simon Fraser (smfr) 2017-12-07 19:18:24 PST
Underlying bug is rdar://problem/35926394.
Comment 8 Alec Miller 2017-12-07 22:11:16 PST
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.
Comment 9 Alec Miller 2017-12-07 22:28:53 PST
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.
Comment 10 Simon Fraser (smfr) 2017-12-08 07:57:31 PST
I found that it works with any value 127 and below.
Comment 11 Simon Fraser (smfr) 2018-01-25 16:44:43 PST
This is actually an overflow issue in feColorMatrix effectApplyAccelerated() when computing the matrix to give to vImage, with a divisor of 256.