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

intresting, by they way what if you try 0% instead of 0 ? [it should be the same but we never know] — Temani Afif, Mar 12 '18 at 15:01
Is this an example of absolute position not respecting grid tracks? — stevensonmt, Mar 12 '18 at 15:24
No...there's no Grid involved here at all despite the title. — Paulie_D, Mar 12 '18 at 15:27

Stickers · Accepted Answer · 2018-03-12T15:17:18.473

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>

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

1 Answers1