Column list with links - items move down on click in Chrome

Question

Column lists in Chrome have an odd bug: When you click the first link in a 1+ column (not the first column) then the item moves the column down by ~5px.

Is this a bug? Can I prevent it with some CSS rules?

Tested Chrome version: 39.0.2171.71 m

Test this in Chrome (fiddle link):

ul {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

<ul>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 1</a>
  </li>
</ul>

Answer 1

As of Chrome 39, anchor elements become focused upon click, i.e. the onfocus event gets triggered and the :focus style gets applied.

Because :focus is now enabled when you click on the link, the default user agent style gets applied as well, i.e.

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

This outline should not influence the multi-column rendering, but it does anyway, which is a bug (fixed).

To fix the problem, simply add outline:0; to the a selector (http://jsfiddle.net/fa4auxkr/4/):

ul a {
    outline: none;
}

Note that the outline is used for accessibility, so don't apply this rule without reason.

Answer 2

This is interesting behaviour! Looks like something to do with the children having display: inline when their parents are in a column.

Changing the <a> to display: block fixes the issue.

No Bug Example

First list has this jumpy behaviour. Second list with display block links, doesn't have the jumping behaviour.

ul {
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
.noJump a {
  display: block;
}

<h2>This is the jump problem</h2>
<ul>
  <li><a href="#">My siblings like to jump</a>
  </li>
  <li><a href="#">I love Jumping!</a>
  </li>
  <li><a href="#">I love Jumping!</a>
  </li>
</ul>

<h2>This has the jumped problem fixed with display: block</h2>
<ul class="noJump">
  <li><a href="#">No Jump</a>
  </li>
  <li><a href="#">No Jump</a>
  </li>
  <li><a href="#">No Jump</a>
  </li>
</ul>