[TweenMax (SVG animation) and Android System Webview]

Hello javlc.dev ... keep in mind that in SVG CSS position absolute .. position offsets do not apply to SVG elements. By their very nature SVG child elements are positioned like absolute positioned elements using a coordinate system like canvas. But dont use CSS position absolute or relative.

 

SVG by default only uses one coordinate system. So basically each SVG child elements are placed absolutely relative to the position of the SVG viewbox. SVG elements do not use the CSS box model. So CSS position offsets like top and left have no bearing on SVG positioning.

 

The only way to have SVG be responsive fully is to use nested SVGs to fake a different coordinate system.

 

This article might help clear things up'

 

https://sarasoueidan.com/blog/svg-coordinate-systems/

 

Happy Tweening

 

Thank you for replying Jonathan,

I did re-read the material given (I had read the same a while ago).

Nevertheless I wanted to mention that the issue is not the responsiveness of the svg element, nor its exclusive usage of the svg coordinate system, but the application of the transform translate values.

I think @malua user has pointed the issue rather well: The animations/tweens' transforms need to be applied as css style rather than in the svg transform svg attribute, when using the particular user agent value that the Android Cordova wrapper is using.

 

Also, did you see the particular animation given in the codepen link: 

See the Pen XpdPmo by FrontRunnerUp (@FrontRunnerUp) on CodePen

?

 

I had that working fine in Chrome browser, but for example, does not work in Safari browser within iPhone 6 (just like within the Cordova wrapper mentioned by malua).

[TweenMax (SVG animation) and Android System Webview]

Hello, on behalf of malua, here is the requested pen,

The code sets the svg inner elements to absolute positioning, then the transforms are being passed as a short property (x, y).

 

See the Pen XpdPmo by FrontRunnerUp (@FrontRunnerUp) on CodePen

 

Edit: One way to check the issue is by using Google Chrome (In Windows 10 at least), open dev tools, and toggling the device toolbar, to view in different mobile devices, particularly the Samsung ones.