Safari：CSS具有绝对位置的多列悬停bug？

Question

我有以下简单的CSS多列布局：

＆＃13;

＆＃13;

ul {
  column-count: 3;
}

li {
  display: block;
  position: relative;
}

.hover {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top .25s ease-in-out;
}

li:hover .hover {
  top: 0;
}

img {
  max-width: 100%;
}

＆＃13;

<ul>
  <li><img src="https://picsum.photos/400/50" alt=""></li>
  <li><img src="https://picsum.photos/400/100" alt=""></li>
  <li>
    <img src="https://picsum.photos/400/300" alt="">
    <div class="hover">Lorem ipsum dolor sit amet.</div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果将鼠标悬停在第三个项目上，则悬停div应与第三个列表元素具有相同的大小，并且位于相同的位置。这在Chrome和Firefox中运行良好。

但是，在Safari中，悬停div也将位于前两张图片后的第一列。

比较：

铬：

Safari浏览器：

我有什么遗漏或者这只是Safari中的一个错误吗？

我正在运行这两种浏览器的最新版本（Chrome 65.0.3325.146和Safari 11.0.3）。

Answer 1

您可以在下面尝试，一般来说，这是防止列项目中断的技巧。

li {
  display: inline-block;
}

ul {
  column-count: 3;
}

li {
  display: inline-block;
  position: relative;
}

.hover {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top .25s ease-in-out;
}

li:hover .hover {
  top: 0;
}

img {
  max-width: 100%;
}

<ul>
  <li><img src="https://dummyimage.com/400x50" alt=""></li>
  <li><img src="https://dummyimage.com/400x100" alt=""></li>
  <li>
    <img src="https://dummyimage.com/400x300" alt="">
    <div class="hover">Lorem ipsum dolor sit amet.</div>
  </li>
</ul>