NEW 174903
CSS filter on svg > g (transform) > foreignObject > div negates the transform on the <g> element 
https://bugs.webkit.org/show_bug.cgi?id=174903
Summary CSS filter on svg > g (transform) > foreignObject > div negates the transform...
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.