Bug 149617 – SVG text transform css animation has no effect

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: SVG

Created attachment 262048 [details]
CSS Animation of svg text element transform

SVG text element transform can't be animated with CSS Animations. Translate, scale or rotate doesn't work.

The attached example has a translate animation for a text and rect element. Only the rect element is animated.

Also, the steps timing function for the color animation doesn't apply anymore. If the transform animation is removed, then the color animation works as expected.

I filed a similar bug for Chromium: https://code.google.com/p/chromium/issues/detail?id=537121

[Brent Fulgham]

Oh, this looks so silly in Safari. We must fix it.

[Radar WebKit Bug Importer]

<rdar://problem/97101948>

[Ahmad Saleem]

Seems to be changes here:

https://github.com/WebKit/WebKit/blob/b1c9ea1fcb1eac9c9a31b4331fecaff051669fe0/Source/WebCore/rendering/svg/RenderSVGInline.cpp#L142

_____

From

#if ENABLE(LAYER_BASED_SVG_ENGINE)
    if (!document().settings().layerBasedSVGEngineEnabled() && diff == StyleDifference::Layout)
        setNeedsBoundariesUpdate();
#else
    if (diff == StyleDifference::Layout)
        setNeedsBoundariesUpdate();
#endif

___ 

#if ENABLE(LAYER_BASED_SVG_ENGINE)
    if (!document().settings().layerBasedSVGEngineEnabled() && diff == StyleDifference::Layout) {
        setNeedsBoundariesUpdate();
        if (style()->hasTransform())
           setNeedsTransformUpdate();
        }
#else
    if (diff == StyleDifference::Layout) {
        setNeedsBoundariesUpdate();
        if (style()->hasTransform())
           setNeedsTransformUpdate();
        }
#endif

_______

I don't know whether this will work or not. But I can give it a try. Thanks!

[Ahmad Saleem]

https://github.com/WebKit/WebKit/pull/5297

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #5)
> https://github.com/WebKit/WebKit/pull/5297

We need to account for case of "transition is from a style with transform to a style without it" and based on comment from Darin, we need to use like this:

oldStyle && oldStyle->hasTransform()

-> Unfortunately, I don't have expertise to write test case for above case of "transition is from a style with transform to a style without it", I am going to close my PR and leave it for someone else to take it up and fix it. Thanks!

[Ahmad Saleem]

It seems to be now fixed in Safari Technology Preview 167 compared to Safari 16.4.

We can close this by marking 'RESOLVED CONFIGURATION CHANGED'. :-)

CCing - Karl to confirm as well.

[Karl Dubost]

It was fixed by Bug 243493 ?

[Ahmad Saleem]

(In reply to Karl Dubost from comment #8)
> It was fixed by Bug 243493 ?

LBSE is not turned on by default and I don't have it enabled as well. So I don't think it will be LBSE patch.

I tested this on Safari Technology Preview 168 and it seems to be fixed. Thanks!