CODEWITHSUNDEEP
cssfirefox
Brian Edelman
Brian Edelman

Reputation: 777

Firefox 60.0.2 not rendering columns in list correctly

EDIT: Link to reproduction on codepen https://codepen.io/bedelman851/pen/oyWpGq

I have a ul to which I am applying columns: 3 to. Each li has an input/custom label. The custom label has the following relevant css.

input[type="checkbox"] + label:before {
  content: '';
  display: block !important; //ie fix
  width: 16px;
  height: 16px;
  border: 1px solid $dark-button;
  border-radius: 2px;
  position: absolute;
  background-color: $white;
  left: 0;
  top: 5px;
}

The height 16px is still being applied to the element, but is actually getting rendered as over 18px when I inspect the element. All others are exactly 16px. This only seems to happen at the top of the last column.

Refer to last column for issue. It doesn't always happen as you'll see in this picture. enter image description here

But I have noticed that the last column in the second picture sometimes does appear this way. If I go in to the inspector and click on the height to disable it and then reenable it, it renders perfectly. Have tried adding !important (god help us) to the height, and adding a min-height. Thoughts?

Upvotes: 0

Views: 52

Answers (1)

Brian Edelman
Brian Edelman

Reputation: 777

This was an actual firefox bug that has now been resolved a year later. https://bugzilla.mozilla.org/show_bug.cgi?id=1468654

Upvotes: 2

Related Questions