转换 CSS 高度属性会导致整体叶盘出现"wiggling"

Question

我需要在悬停几个<li>项目时对高度属性进行动画处理。它们是垂直居中的弹性框项。在正常状态下，它们有固定的高度，一切看起来都不错。然而，在它们的悬停状态下，当我尝试将它们的高度转换为新值时，它们会上下摆动。但仅限于整体叶盘。这很奇怪。

我有一个演示小提琴来演示这种行为。这是链接：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 不是通用浏览器？

除了小提琴之外，我还提供了重现以下问题的相同代码;

该 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>能够很好地"收缩"干净利落 - 在一切都达到最终状态之前，不会连续上下弹跳。

Answer 1

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

* {
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>