Why is transform-origin not working in IE and Edge?

Question

css

I can't understand what's the matter... There is support for caniuse, the prefix for the guarantee is specified, but the property does not work in the specified browsers.
There is such an animation here vetero4eg.github.io/Demo/prorok.html
for the points, the desired center is indicated ..
-webkit-transform-origin: 131px 77px;
-ms-transform-origin: 131px 77px;
transform-origin: 131px 77px;
what's wrong?
I tried to set transformOrigin via TweenMax but then it doesn't work at all everywhere... I
specified TweenMax.set('.dot', {transformOrigin: "131px 77px"});

Answer 1

By caniuse there is support

Well, not really, there's footnote #1 that says IE and Edge "Does not support CSS transforms on SVG elements".
Take it out of CSS and use a matrix instead of scale:

TweenLite.from("...", 1.5, { transform: "matrix(0, 0, 0, 0, 131, 77)" });

Answer 2

Because you need to do it on canvas, and not turn your brains out trying to do it on svg and css. IE and Edge have poor svg support, and transform-origin doesn't work for SVG. Humble yourself and look for a workaround. At least animate each point separately.