.parent {
height: 50px;
background-color: blue;
padding: 10px;
}
.child {
background-color: yellow;
padding: 10px;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.child.move {
transform: translateY(-150%);
padding: 0; /* If 10px: no bug */
}
<br><br><br>
<div class="parent">
<div class="child" onclick="this.classList.toggle('move')">Click me</div>
</div>
我在Webkitbugtracker
.中找不到答案。
CSS变换 +宽度 +左 +顶级过渡跳跃在Safari浏览器上 safari(9.1)
transition-delay: 1ms;
将迫使填充属性在transform