4

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

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • I cannot reproduce the problem in my chrome browser. Uploading a picture describing your problem will be helpful. – Wais Kamal Sep 30 '18 at 17:19
  • 1
    @WaisKamal I've added a gif of the original situation where this is happening. If you want I can also try making a gif of it happening in the snippet, but this behaviour is the same as in the snippet. – Joeytje50 Sep 30 '18 at 17:27
  • 1
    The problem illustrated by the GIF given above does not exist in the snippet given in the question (at least in my browser). I will suggest removing the snippet given and posting the minimum amount of code required to reproduce the problem. If the problem also exists in the above given snippet, then try updating your chrome/safari browser to the latest version. – Wais Kamal Sep 30 '18 at 17:35
  • I've changed the gif to show the effect in the snippet, and added details about browser versions. I'm currently on Chrome Stable (69.0.3497.100) where this effect is occurring. The gifs were sent to me by someone working on the same project, who also experiences the same issues. Are you sure you're not on Canary/Beta when testing this? – Joeytje50 Sep 30 '18 at 18:13
  • No, I am using the default Chrome browser, the same version as yours. – Wais Kamal Sep 30 '18 at 18:58
  • I've made a version that has a much clearer illustration of this effect. Important here is that the problem is that the boxes in the second and third column somehow 'overflow' into the columns before them: https://jsbin.com/rusepob/1/edit?html,css,output. In Chrome, the same effect occurs, while in Firefox this still doesn't happen (although it does look kind of bad now). Hopefully you can reproduce the effect in your browser when using this jsbin. If so, do you have any idea how to prevent the boxes from 'overflowing' to the previous box? – Joeytje50 Sep 30 '18 at 19:46
  • The problem does not appear, even in the jsbin. I suggest compiling an issue on Github. – Wais Kamal Sep 30 '18 at 19:59
  • I get that problem ;/ Chrome 69.0.3497.100 (official) (64 bits) – Patryk Sep 30 '18 at 22:10

1 Answers1

2

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.

Patryk
  • 329
  • 3
  • 12