[Webkit-unassigned] [Bug 200532] New: Applying a css matrix3d transform to an SVG containing a mask breaks the mask

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Aug 8 01:51:22 PDT 2019


https://bugs.webkit.org/show_bug.cgi?id=200532

            Bug ID: 200532
           Summary: Applying a css matrix3d transform to an SVG containing
                    a mask breaks the mask
           Product: WebKit
           Version: Safari 12
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: m.markowski at artifacts.de
                CC: zimmermann at kde.org

Created attachment 375790

  --> https://bugs.webkit.org/attachment.cgi?id=375790&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190808/3bd742d2/attachment-0001.html>


More information about the webkit-unassigned mailing list