Bug 200532 - Applying a css matrix3d transform to an SVG containing a mask breaks the mask
Summary: Applying a css matrix3d transform to an SVG containing a mask breaks the mask
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-08-08 01:51 PDT by Michael Markowski
Modified: 2019-08-08 10:41 PDT (History)
4 users (show)

See Also:


Attachments
Screenshot of Safari showing the bug (560.24 KB, image/png)
2019-08-08 01:51 PDT, Michael Markowski
no flags Details
Screenshot showing chrome rendering correctly (557.48 KB, image/png)
2019-08-08 01:52 PDT, Michael Markowski
no flags Details
reduced test case (1.04 KB, text/html)
2019-08-08 10:40 PDT, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Michael Markowski 2019-08-08 01:51:22 PDT
Created attachment 375790 [details]
Screenshot of Safari showing the bug

The following example contains an SVG consisting of a JPEG with a luminance mask (also JPEG). Using this technique, images that contain alpha channels can be dramatically reduced in size.
The bug prevents this method to be used in conjunction with animations or layouting (rotation).
When switching between matrix and matrix3d transforms, especially rotation, the SVG mask gets messed up. When applying an identity matrix3d before transforming it, it renders fine. Though, resizing the window after a successful 3D transform, it breaks again.

See this codepen for further explanation and an example:

https://codepen.io/artifacts/full/ZgaMrZ


The attached screenshots show chrome (works) and Safari (fails).

Workaround (flickering):

- Always apply an identity matrix3d on elements that should be rotated
- Attach a resize handler to the window
- On resize, stash the element's matrix3d, hide the element, apply transform:none, apply an identity matrix3d, re-apply the element's matrix3d transform
Comment 1 Michael Markowski 2019-08-08 01:52:11 PDT
Created attachment 375792 [details]
Screenshot showing chrome rendering correctly
Comment 2 Said Abou-Hallawa 2019-08-08 10:39:40 PDT
The bug can be reproduced with simple SVG masks which is not necessarily related to images. See the attached reduced test case.
Comment 3 Said Abou-Hallawa 2019-08-08 10:40:09 PDT
Created attachment 375816 [details]
reduced test case
Comment 4 Radar WebKit Bug Importer 2019-08-08 10:41:06 PDT
<rdar://problem/54086080>