CSS filter on svg > g (transform) > foreignObject > div negates the transform on the <g> element
Reported by
d...@moqups.com,
Jul 27 2017
|
|||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
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)">
What is the expected behavior?
The <div> should stay in place, and exhibit the blur effect as defined in its style.
What went wrong?
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.
In addition, the div is cropped at various positions (see attached image)
Did this work before? N/A
Does this work in other browsers? No
Safari behaves similarly but does not exhibit the cropping issue.
Firefox / macOS behaves as expected.
Chrome version: 59.0.3071.115 Channel: n/a
OS Version: OS X 10.12.5
Flash Version:
,
Jul 27 2017
WebKit bug report here: https://bugs.webkit.org/show_bug.cgi?id=174903
,
Jul 31 2017
,
Dec 17 2017
Encounter with the same problem.
,
Dec 10
Fixed by SPv1.75 enablement (0a9a5c311a1d3a298f952e495510bd6fe3faa2f6; but more specifically the foreignObject work depending on it). |
|||
►
Sign in to add a comment |
|||
Comment 1 by f...@opera.com
, Jul 27 2017Status: Available (was: Unconfirmed)