在iOS Safari上使用转换动画转换倾斜属性时,该元素会从屏幕边缘移开,与设置transform-origin
属性的位置相反,从而导致“弹跳”效果。以下css属性应用于有问题的元素:
position: fixed;
width: 100%;
transform-origin: 0 0;
transition: transform 1s, opacity .5s cubic-bezier(0.46, 0.03, 0.52, 0.96) 4ms;
-webkit-transition: transform 1s, opacity .5s cubic-bezier(0.46, 0.03, 0.52, 0.96) 4ms;
((我省略了background color
,box-shadow
,opacity
等无关的css属性,以及)
按下按钮时,skewY(30deg)
将应用于元素。预期的行为是使元素的边缘与屏幕的边缘保持“接触”。
This就是它的样子。
提前感谢您的帮助!