Martin Martin - 4 months ago 12
CSS Question

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

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

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.

Comments