Search code examples
htmlcssgoogle-chromewebkitcss-multicolumn-layout

List with columns gives hover effect on wrong items in Webkit/IE

Today I ran into the following problem: When using a list with multiple columns as shown in the snippet, where the list items have a margin-bottom set to them, Chrome doesn't render the bottom of the columns correctly, sending hover-events to the wrong <li> when hovering just below the bottom one.

To see this effect, simply hover back and forth over the bottom of the bottom item in the leftmost column. It briefly highlights the 4th element for a single pixel, after which it highlights the 3rd one.

ul {
  columns: 3;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  background: #6F6;
  margin-bottom: .4em;
  cursor: pointer;
}

li:hover {
  background: #CFC;
}
<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
  <li>Amet</li>
  <li>Consectetur</li>
  <li>Adipiscing</li>
  <li>Elit</li>
</ul>

This only seems to happen in Chrome (stable, 69.0.3497.100) and Safari (as well as Internet Explorer 10 and 11), and not in FF/Edge. It also seems to persist even if I add something like margin-bottom: -1px; overflow: hidden; to the ul parent.

My question is: is there any way to prevent this from happening, without (noticeably) changing the way the items look?

Edit: As requested, here's a demonstration someone sent illustrating the effect in the snippet: Weird behaviour of list

Edit 2: Changed gif to be of the snippet, and added info on browser version (Chrome 69.0.3497.100) and IE10/IE11. Interesting about IE is that this effect is no longer a single invisible row of pixels, but a visible bar of pixels that is affected. See the image below. IE version of this bug

Solution

  • You must change li built-in:

    margin-bottom: 0.4em

    To:

    margin-bottom: 0.39em

    Problem only occur when: column are 3, margin is 0.4em (6.400px) so it create some round problem in this version of Chrome ;/

    After test : 0.39em is (6.240px) and working fine.