Safari: CSS Multi-column hover bug with absolute position?

Question

I have the following easy CSS Multi-column layout:

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%;
}

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

If you hover over the third item, the hover div should have the same size as the third list element and exactly on the same position. This works fine in Chrome and Firefox.

However, in Safari, the hover div will also be in the first column after the first two images.

A comparison:

Chrome:

Safari:

Is there anything I am missing or is this just a bug in Safari?

I’m running the latest version of both browsers (Chrome 65.0.3325.146 and Safari 11.0.3).

Answer 1

You can try below, in general it's a trick to prevents column items to break.

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>