112717 2013-03-19 10:53:53 -0700 CSS reference (SVG) filters aren't rendered at the correct resolution with device scale, page scale or zooming 2022-10-05 12:35:23 -0700 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) Unspecified Unspecified RESOLVED CONFIGURATION CHANGED P2 Normal --- 68469 1 sugoi webkit-unassigned aigner.erik dino krit sabouhallawa senorblanco simon.fraser steffen.weber zimmermann oldest_to_newest 858469 0 sugoi 2013-03-19 10:53:53 -0700 SVG filters aren't zoomed properly when used within CSS. Here are 3 cases to illustrate the problem, the first 2 cases work and the 3rd one fails. Case 1 - CSS : HTML code : <img style="-webkit-filter:blur(10px)" src="resources/reference.png"> What happens: We create a BlurFilterOperation object and scale its values in StyleResolver::createFilterOperations() using the zoomFactor which is applied when calling convertToFloatLength(). The behavior is good. Case 2 - SVG : HTML code : <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=160 height=300> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> </filter> </defs> <image x="0" y="0" width="160px" height="90px" xlink:href="resources/reference.png" filter="url(#f1)"/> </svg> What happens : We create a SVGFilter object and use SVGFilter::applyHorizontalScale() and SVGFilter::applyVerticalScale() to apply the zoom factor. The behavior is good. Case 3 - SVG within CSS : HTML code : <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> <defs> <filter id="f1"> <feGaussianBlur stdDeviation="10"/> </filter> </defs> </svg> <img style="-webkit-filter: url(#f1); filter: url(#f1);" src="resources/reference.png"> What happens : We create a SVG Filter inside a CSS. This does not create a SVGFilter object, but creates the base class Filter object instead (It creates a REFERENCE filter operation within FilterEffectRenderer::build()). Since the base class functions Filter::applyHorizontalScale() and Filter::applyVerticalScale() have no information about the zoom, the blur kernel size is not scaled and the behavior is wrong. Blur is just an example. All filters that require an adjustment for the zoom factor are most likely also wrong. 858501 1 krit 2013-03-19 11:13:09 -0700 Your observation is correct. Authors can define the resolution of the SVG Filter according to the spec. But this is not the only reason for setting m_filterResolution in Filter.h Filtered elements can have transforms on it, which could increase the element size (transform="scale(2)"). The image for this element must be bigger to cover the bigger resolution. Both things, filter resolution and element resolution are set with: // Set the scale level in SVGFilter. filterData->filter->setFilterResolution(scale); in RenderSVGResourceFilter (scale is a FloatSize here). Since CSS does not use RenderSVGResourceFilter, the CSS code must do this step on it's own. I assume that this is not the case at the moment. 859631 2 krit 2013-03-20 13:04:12 -0700 *** Bug 93471 has been marked as a duplicate of this bug. *** 859642 3 simon.fraser 2013-03-20 13:20:01 -0700 Tried to improve the title. Please fix if it's inaccurate. 859657 4 senorblanco 2013-03-20 13:31:43 -0700 (In reply to comment #2) > *** Bug 93471 has been marked as a duplicate of this bug. *** I don't think this is exactly the same problem as 93471, since this problem applies only to SVG filters within CSS, not the CSS shorthand filters. CSS (shorthand) filters don't exhibit the offset problems Alexis describes. They are Case 1 above. 1903498 5 462815 sabouhallawa 2022-10-05 12:31:09 -0700 Created attachment 462815 test case (open and zoom in) 1903503 6 sabouhallawa 2022-10-05 12:35:23 -0700 I think this bug has been fixed a while ago. 462815 2022-10-05 12:31:09 -0700 2022-10-05 12:31:09 -0700 test case (open and zoom in) test-svg-zoom.html text/html 345 sabouhallawa PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lk dGg9IjAiIGhlaWdodD0iMCI+CiAgPGRlZnM+CiAgICA8ZmlsdGVyIGlkPSJmMSI+CiAgICAgIDxm ZURyb3BTaGFkb3cgZHg9IjE2IiBkeT0iMTYiIHN0ZERldmlhdGlvbj0iMCIgZmxvb2QtY29sb3I9 ImJsYWNrIi8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+Cjwvc3ZnPgo8ZGl2IHN0eWxlPSJwb3Np dGlvbjogZml4ZWQ7IHRvcDogMTAwcHg7IGxlZnQ6IDEwMHB4OyB3aWR0aDogMTAwcHg7IGhlaWdo dDogMTAwcHg7IGJhY2tncm91bmQtY29sb3I6IGdyZWVuOyBmaWx0ZXI6IHVybCgjZjEpOyI+PC9k aXY+