Как заставить IE обработать этот флексбокс?

Question

[Otrivin]

Здравствуйте!

Нужно расположить три элемента друг над другом и анимировать, аля виджет обратного звонка. Реализовал это так:
Песочница

т.е. создаем два слоя:
- в первом - радиальный фон (флекс-контейнер абсолютно спозиционирован, в нём автоматически выравниваемый элемент, к которому прикручена анимация);
- во втором - иконка телефона + фон (бесконечно увеличивающийся-уменьшающийся кружок).

Во втором слое элемент фона нужно абсолютно спозиционировать, чтобы он не двигал иконку трубки. Но тогда в IE он съезжает с центра.

Вопрос: можно ли как-то это поправить с текущей структурой, или лучше будет просто переместить проблемный фон в отдельный, третий слой?

Answer 1

[sergey_never]

Помимо просто position: absolute задайте ещё несколько параметров для точного указания позиционирования элемента
Я бы добавил такие стили этому элементу:

left: 50%;
top: 50%;
margin-left: -56px; (половина размера вашего элемента)
margin-top: -56px;

По идее, во всех браузерах теперь этот элемент должен быть всегда в центре

Comments

[strelok011]

взамен отрицательного margin можно использовать transform: translate по координатам (-50%), не придется подбирать руками значение смещения.

[sergey_never]

strelok011,
Это то само собой, что transform самое идеальное решение, просто у него там всё в анимациях и для этого блока transform-origin используется. Поэтому я пошел через margin, чтобы не касаться transform. Да и старый добрый margin IE лучше воспринимает, чем трансформации, так как загвоздка была именно в IE))