search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
727 stars 62 forks source link

codepen.io - SVG filter defined in CSS not applying to element #137838

Open chriskirknielsen opened 1 month ago

chriskirknielsen commented 1 month ago

URL: https://codepen.io/chriskirknielsen/pen/jOowrPP

Browser / Version: Safari Technology Preview 192 (Safari 17.4, WebKit 18619.1.8.1) Operating System: Mac OS X 13.4.1 Tested Another Browser: Yes Firefox

Problem type: Something else Description: SVG filter defined in CSS not applying to element Steps to Reproduce: When applying a filter onto an element based on an SVG filter, whether it is inline in the CSS as a data URI, or present in the page and referenced by ID, the filter does not apply.

Tested on Chrome and also doesn't work as expected. Only Firefox renders the correct result.

Browser Configuration
  • None

From webcompat.com with ❤️

softvision-raul-bucata commented 1 month ago

@chriskirknielsen Thanks for the report. Is your issue similar to this? https://github.com/webcompat/web-bugs/issues/135969

[qa_23/2024]

chriskirknielsen commented 1 month ago

@chriskirknielsen Thanks for the report. Is your issue similar to this? #135969

This is an unrelated issue. My report concerns the use of filter: url("data/svg+xml,…#id") whereas the issue you linked is about invalid double-pseudo selectors and nesting, which my demo does not use.

softvision-raul-bucata commented 4 weeks ago

@chriskirknielsen So the issue is that Firefox renders the flashing rectangle correctly, whilst Safari and Chrome flash the rectangle on the whole field, basically covering the <div> area?

[inv_23/2024]

chriskirknielsen commented 4 weeks ago

@softvision-raul-bucata I wasn't able to provide different explanations in the form based on the browser:

The orange filter effect is based on an actual SVG element. The red filter effect is a data URI SVG inlined into the CSS, which does not work at all in both Chrome and Safari.

I've made video recordings to help visualise this (warning: flashing images, especially Chrome) filter-firefox Firefox: the filter applies correctly: drop-shadow, red fill, orange fill.

filter-safari Safari: the filter behaves incorrectly: drop-shadow, no filter, invisible element.

filter-chrome Chrome: the filter behaves incorrectly: drop-shadow, no filter, entire page has orange fill.

(sorry they aren't in sync but I hope this helps!)

softvision-raul-bucata commented 3 weeks ago

@chriskirknielsen Thanks, that is also the result I get. @karlcow Keeping you aware of the issue

[inv_24/2024]

karlcow commented 3 weeks ago

@softvision-raul-bucata Yes thanks a lot. This is probably related to https://bugs.webkit.org/show_bug.cgi?id=246106