174903 2017-07-27 12:06:46 -0700 CSS filter on svg > g (transform) > foreignObject > div negates the transform on the <g> element 2024-03-05 21:14:50 -0800 1 1 1 Unclassified WebKit SVG Safari 10 Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=270317 InRadar P2 Normal --- 1 dan webkit-unassigned sabouhallawa simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1332689 0 316562 dan 2017-07-27 12:06:46 -0700 Created attachment 316562 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. 1332705 1 webkit-bug-importer 2017-07-27 13:42:24 -0700 <rdar://problem/33575367> 1332716 2 simon.fraser 2017-07-27 13:50:35 -0700 We're just bad at things that trigger RenderLayer creation inside <foreignobject> in general. 316562 2017-07-27 12:06:46 -0700 2017-07-27 12:06:46 -0700 HTML test case jsbin.xemobevafa.1.html text/html 1045 dan PCFET0NUWVBFIGh0bWw+CjwhLS0KQ3JlYXRlZCB1c2luZyBKUyBCaW4KaHR0cDovL2pzYmluLmNv bQoKQ29weXJpZ2h0IChjKSAyMDE3IGJ5IGFub255bW91cyAoaHR0cDovL2pzYmluLmNvbS94ZW1v YmV2YWZhLzEvZWRpdCkKClJlbGVhc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZTogaHR0cDovL2pz YmluLm1pdC1saWNlbnNlLm9yZwotLT4KPG1ldGEgbmFtZT0icm9ib3RzIiBjb250ZW50PSJub2lu ZGV4Ij4KPGh0bWw+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICA8bWV0YSBuYW1l PSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoIj4KICA8dGl0bGU+SlMgQmlu PC90aXRsZT4KPHN0eWxlIGlkPSJqc2Jpbi1jc3MiPgpzdmcgewogIGJvcmRlcjogMXB4IHNvbGlk IHJlZDsKfQoKZGl2IHsKICBiYWNrZ3JvdW5kOiByZWQ7CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0 OiAxMDAlOwp9CgpzdmcuZmlsdGVyIGRpdiB7CiAgLXdlYmtpdC1maWx0ZXI6IGJsdXIoMTBweCk7 Cn0KPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICA8cD5DbGljayBhbnl3aGVyZSBvbiB0aGUgU1ZH IGltYWdlIGJlbG93IGFuZCBub3RpY2UgdGhlIHNoaWZ0IHdoZW4gYXBwbHlpbmcgQ1NTIGZpbHRl cnMgdG8gdGhlIHJlZCByZWN0YW5nbGUuPC9wPgogIDxzdmcgd2lkdGg9JzUwMCcgaGVpZ2h0PSc1 MDAnPgogICAgPGcgdHJhbnNmb3JtPSdtYXRyaXgoMSAwIDAgMSAxMDAgMTAwKSc+CiAgICA8Zm9y ZWlnbk9iamVjdCB4PSc1MCcgeT0nNTAnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz4KICAgICAg PGRpdj5DbGljayBtZTwvZGl2PgogICAgPC9mb3JlaWduT2JqZWN0PgogICAgPC9nPgogIDwvc3Zn Pgo8c2NyaXB0IGlkPSJqc2Jpbi1qYXZhc2NyaXB0Ij4KdmFyIHN2Z19lbCA9IGRvY3VtZW50LnF1 ZXJ5U2VsZWN0b3IoJ3N2ZycpOwpzdmdfZWwuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5j dGlvbihlKSB7CiAgc3ZnX2VsLmNsYXNzTGlzdC50b2dnbGUoJ2ZpbHRlcicpOwp9KTsKPC9zY3Jp cHQ+CjwvYm9keT4KPC9odG1sPg==