Bug 133150 – REGRESSION transform-origin doesn't take zoom into account correctly for SVG content

• Component: SVG
• Status: RESOLVED DUPLICATE

[Dirk Schulze]

In the following fiddle, the transform-origin doesn't apply the value of the zoom property (or CMD+/CMD-) correctly. It seems that the origin stays at the same position as without zoom.

Note: it works correctly in Safari 7. I don't know the regression window yet. Must be a problem in 2013 or earlier though.

http://jsfiddle.net/cpkSp/

[Dirk Schulze]

Additional information: This problem just occurs for percentage values. Pixel values are scaled correctly. Which, on the other hand, doesn't work correctly in Safari 7.

[Ahmad Saleem]

It is still happening in Safari 16.2 & STP160 using JSFiddle from Comment 0 and it is fixed in following commit by Blink:

Commit - https://src.chromium.org/viewvc/blink?view=revision&revision=174907

WebKit Source - https://searchfox.org/wubkat/source/Source/WebCore/svg/SVGGraphicsElement.cpp#98

There are fixes in LBSE so I don't know whether it is already fixed in LBSE or not? Appreciate if @Nikolaz can confirm. Thanks!

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #2)
> It is still happening in Safari 16.2 & STP160 using JSFiddle from Comment 0
> and it is fixed in following commit by Blink:
> 
> Commit - https://src.chromium.org/viewvc/blink?view=revision&revision=174907
> 
> WebKit Source -
> https://searchfox.org/wubkat/source/Source/WebCore/svg/SVGGraphicsElement.
> cpp#98
> 
> There are fixes in LBSE so I don't know whether it is already fixed in LBSE
> or not? Appreciate if @Nikolaz can confirm. Thanks!

I applied this locally and this does fix the attached test case but the attached testcase with the commit does not work.

[Ahmad Saleem]

Blink Commit (from GitHub Repo - Chromium) - https://github.com/chromium/chromium/commit/56ca23de0ae12871406e53753d71c2237551ac24

[Ahmad Saleem]

// Honor any of the transform-related CSS properties if set.
    if (hasSpecifiedTransform || (style && (style->translate() || style->scale() || style->rotate()))) {
        TransformationMatrix transform;
        float zoom = style->usedZoom();

        // CSS transforms operate with pre-scaled lengths. To make this work with SVG
        // (which applies the zoom factor globally, at the root level) we
        //
        //   * pre-scale the bounding box (to bring it into the same space as the other CSS values)
        //   * invert the zoom factor (to effectively compute the CSS transform under a 1.0 zoom)
        //
        
        // Note: objectBoundingBox is an emptyRect for elements like pattern or clipPath.
        // See the "Object bounding box units" section of http://dev.w3.org/csswg/css3-transforms/
        if (zoom != 1) {
            FloatRect scaledBBox = renderer->transformReferenceBoxRect();
            scaledBBox.scale(zoom);
            transform.scale(1 / zoom);
            style->applyTransform(transform, TransformOperationData(scaledBBox, renderer.get()));
            transform.scale(zoom);
        } else
            style->applyTransform(transform, TransformOperationData(renderer->transformReferenceBoxRect(), renderer.get()));

___

This compiles and fix attach test case.

[Devon Govett]

Just ran into this too. Ahmad, did you submit a PR with your patch?

[Fujii Hironori]

281265@main fixed the problem.

[Fujii Hironori]

*** This bug has been marked as a duplicate of bug 194903 ***

[Devon Govett]

Oh thanks! I can verify that it is fixed in the latest Safari tech preview.

[Ahmad Saleem]

(In reply to Devon Govett from comment #9)
> Oh thanks! I can verify that it is fixed in the latest Safari tech preview.

I think Fuji fixed it and you should test on Safari Technology Preview. Only bit missing would be SVG text but I haven't test it yet.