转换 CSS 高度属性导致 "wiggling" 在 Blisk

Question

我需要在悬停几个<li> 项时设置高度属性的动画。它们是垂直居中的 flexbox 项目。在他们的正常状态下，他们有一个设定的高度，一切看起来都很好。然而，在它们悬停的状态下，当我尝试将它们的高度转换为新值时，它们会上下摆动。但仅限于布里斯克。真奇怪。

我有一个演示 fiddle 来演示此行为。这是 link：https://jsfiddle.net/ehdk2tj3/。

该问题可以在 Blisk 11.0.157.186 中重现。但是，在 Chrome 72.0.3626.121 中，Opera 58.0.3135.107 和 FF 65.0.1 可以正常工作。

由于 Blisk 不是通用浏览器，所以我可以安全地忽略一些与 Blisk 相关的奇怪问题吗？

除了 fiddle，我还提供了重现以下问题的相同代码；

HTML：

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

和CSS：

ul {
  display: flex; align-items: center;
}
li {
  display: flex; align-items: center;
  height: 125px;
  transition: height 350ms;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  list-style: none;
}
li:hover {
  height: 75px;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}

我希望 <li> 能够 'shrink' 干净利落 - 在一切都设置为最终状态之前不会连续上下弹跳。

Answer 1

我使用 padding 而不是 height 来对齐列表。并且还删除了 flex used inline-block 以避免悬停时缩小。我希望这个解决方案将支持所有浏览器。

* {
    box-sizing: border-box;
    position: relative;
}

ul {
    display: flex;
}

li:hover {
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    padding: 15px 5px 20px;
}

li {
    transition: padding 350ms;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    list-style: none;
    display: inline-block;
    align-self: center;
    padding: 25px 5px 30px;
}

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

转换 CSS 高度属性导致 "wiggling" 在 Blisk

Transitioning the CSS height property causes "wiggling" in Blisk

css

css-transitions

转换 CSS 高度 属性 导致 "wiggling" 在 Blisk

Transitioning the CSS height property causes "wiggling" in Blisk

css

css-transitions

转换 CSS 高度属性导致 "wiggling" 在 Blisk