Bug 200532

Summary:

Applying a css matrix3d transform to an SVG containing a mask breaks the mask

Product:

WebKit

Reporter:

Michael Markowski <m.markowski>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, karlcow, m.markowski, sabouhallawa, webkit-bug-importer, zimmermann

Priority:

Keywords:

InRadar

Version:

Safari 12

Hardware:

All

OS:

All

Attachments:

Description	Flags
Screenshot of Safari showing the bug	none
Screenshot showing chrome rendering correctly	none
reduced test case	none

Michael Markowski

Reported 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

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
View All Add attachment proposed patch, testcase, etc.

Michael Markowski

Comment 1 2019-08-08 01:52:11 PDT

Created attachment 375792 [details] Screenshot showing chrome rendering correctly

Said Abou-Hallawa

Comment 2 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.

Said Abou-Hallawa

Comment 3 2019-08-08 10:40:09 PDT

Created attachment 375816 [details] reduced test case

Radar WebKit Bug Importer

Comment 4 2019-08-08 10:41:06 PDT

<rdar://problem/54086080>

Ahmad Saleem

Comment 5 2024-05-20 15:25:18 PDT

@Said - I am unable to reproduce this using your 'reduced' test case and it matches Chrome Canary 127 and Firefox Nightly 128. @Karl - can you double check?

Karl Dubost

Comment 6 2024-05-20 17:45:39 PDT

This is working the same everywhere now.

Note You need to log in before you can comment on or make changes to this bug.