I have a bunch of <use> (combined with <symbol>) elements within an SVG that I indefinitely animate using translate. This works really well on every browser. The thing is, this SVG is rotated. The rotation of the SVG causes the bounding box of the <use> elements to constantly change dimensions as they’re animated – this does only happen in Safari and any iOS browser. This change in dimensions causes highly frequent layout repaints of the ENTIRE document, which obviously leads to very poor performance of the website. I have tried MANY things to resolve this issue:
- Animating the elements using CSS Keyframes, Javascript web animation API, SVG
<animate>and<animateTransform>– all with the same results, and in combination with the following: - Put
will-change: transform;,contain: strict;,isolation: isolate;and evenwill-change: width, height;on the elements in question and their parent element(s) - Tried all kinds of other CSS properties on different elements:
- Variations of
height,widthinpx,vwand% - Variations of
positionbetweenfixed,absoluteand the defaultstatic - …and more.
- Variations of
No matter what I do, the simple translation of the elements alter the size of their bounding box which causes layout repaints. A few noteworthy things:
- In Chrome / Edge / Firefox, the bounding box is rounded to 2 decimal places and does not change, however in Safari this is 0 decimal places and flickers back and forth between 2 values.
- Current solution is to use the
transformSVG attribute on the parent SVG element to rotate everything, which also doesn’t work in Safari. The animations work smoothly on all browsers now, but there is no rotation in Safari.
Does anyone have an idea of what I can do, to prevent the bounding box from resizing after rotating (while animating)? It seems like the bounding box is measuring the element’s size on a non-rotated plane (i.e. just the regular x and y).
Any help would be appreciated!
You need to sign in to view this answers
Leave feedback about this