Bug 174903 - CSS filter on svg > g (transform) > foreignObject > div negates the transform on the <g> element
Summary: CSS filter on svg > g (transform) > foreignObject > div negates the transform...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-07-27 12:06 PDT by Dan
Modified: 2024-03-05 21:14 PST (History)
4 users (show)

See Also:

Attachments
HTML test case (1.02 KB, text/html)
2017-07-27 12:06 PDT, Dan 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Dan 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.
Comment 1 Radar WebKit Bug Importer 2017-07-27 13:42:24 PDT 
<rdar://problem/33575367>
Comment 2 Simon Fraser (smfr) 2017-07-27 13:50:35 PDT 
We're just bad at things that trigger RenderLayer creation inside <foreignobject> in general.