Была написана @keyframes-анмация для плавного появления поля поиска из центра экрана.
@keyframes Open{
0%{
width: 0;
margin-top: 10px;
margin-left: 50%;
margin-right: 50%;
opacity: 0;
}
100%{
width: 80%;
margin-top: 10px;
margin-left: 10%;
margin-right: 10%;
opacity: 1;
}
}
@-webkit-keyframes Open{
0%{
width: 0;
margin-top: 10px;
margin-left: 50%;
margin-right: 50%;
opacity: 0;
}
100%{
width: 80%;
margin-top: 10px;
margin-left: 10%;
margin-right: 10%;
opacity: 1;
}
}
html, body{
min-height: 100%;
width: 100%;
display: flex;
-webkit-align-content: center;
align-content: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.searchbar{
display: flex;
overflow: hidden;
position: fixed;
margin: auto;
border-radius: 12px;
z-index: 5002;
height: 50px;
width: 0;
background: #fff;
}
При воспроизведении через стационарные браузеры Firefox 32 и Opera 36 анимация отрисовывается корректно. Однако, при попытке воспроизведения в мобильных Chrome 67 и Opera 45, отрисовка начинается у правой границы экрана и элемент также располагается возле неё. Также проводил тесты в стандартном мобильном браузере Meizu - воспроизводится точно такой же @-webkit-keyframes, но отрисовывается анимация корректно. При этом, если в параметрах обоих ключевых кадров @keyframes убрать свойства margin-left и margin-right, то анимация в мобильных Chrome и Opera будет воспроизводиться корректно. Однако, в таком случае, в стационарных браузерах отрисовка будет начинаться от левой границы экрана и элемент будет располагаться возле неё.
Подскажите, пожалуйста, что могло послужить причиной такого странного поведения анимации в разных браузерах.
UPD: обновил параметры анимации как советовал Геннадий. В мобильных браузерах отображается корректно, в десктопном Firefox 32 тоже, но в десктопной Opera наблюдается следующая картина.
@keyframes Open{
0%{
width: 0;
opacity: 0;
}
100%{
width: 80%;
opacity: 1;
}
}
html, body{
min-height: 100%;
width: 100%;
display: flex;
-webkit-align-content: center;
align-content: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.searchbar{
display: flex;
overflow: hidden;
position: fixed;
margin: 10px auto 0;
border-radius: 12px;
z-index: 5002;
height: 50px;
width: 0;
background: #fff;
}
UPD2: по совету Геннадия изменил параметры позиционирования. Всё работает корректно.