Bug 174903

Summary: CSS filter on svg > g (transform) > foreignObject > div negates the transform on the <g> element
Product: WebKit Reporter: Dan <dan>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=270317
Attachments:
Description Flags
HTML test case none

Dan
Reported 2017-07-27 12:06:46 PDT
Created attachment 316562 [details] HTML test case Steps to reproduce the problem: 1. Set up the HTML <html> <body> <svg width='500' height='500'> <g transform='matrix(1 0 0 1 100 100)'> <foreignObject x='50' y='50' width='200' height='200'> <div>Some content</div> </foreignObject> </g> </svg> </body> </html> 2. Apply a CSS filter to the <div>, such as with: <div style="filter: blur(10px)"> --- The <div> should stay in place, and exhibit the blur effect as defined in its style. Instead, the <div> gets shifted upwards and leftwards in a way that suggests the transform matrix applied on the <g> element is no longer taken into consideration. Chrome / macOS exhibits a similar problem, but compounded with some weird cropping. Bug report here: https://bugs.chromium.org/p/chromium/issues/detail?id=749756 Firefox / macOS behaves as expected.
Attachments
HTML test case (1.02 KB, text/html)
2017-07-27 12:06 PDT, Dan 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-07-27 13:42:24 PDT
<rdar://problem/33575367>
Simon Fraser (smfr)
Comment 2 2017-07-27 13:50:35 PDT
We're just bad at things that trigger RenderLayer creation inside <foreignobject> in general.
Note You need to log in before you can comment on or make changes to this bug.