How to make IE process this flexbox?

Question

css

Hello!
We need to place three elements on top of each other and animate, ala callback widget. Implemented it like this:
Sandbox
ie. create two layers:
- in the first one - a radial background (the flex container is absolutely positioned, it contains an automatically aligned element, to which the animation is screwed);
- in the second - phone icon + background (infinitely increasing-decreasing circle).
In the second layer, the background element needs to be absolutely positioned so that it doesn't move the tube icon. But then in IE it moves off center.
Question: is it possible to somehow fix this with the current structure, or would it be better to just move the problematic background to a separate, third layer?

Answer 1

In addition to just position: absolute , set a few more options to specify the exact position of the element.
I would style this element like this:
left: 50%;
top: 50%;
margin-left: -56px; (half the size of your element)
margin-top: -56px;
In theory, in all browsers now this element should always be in the center