transform: skew causes gap between elements in Firefox

user_14545160 0
Viewed 485

When i use transform:skew it results in a gap between divs in Firefox but not Chrome.

Edit: I've animated the height of the divs to make the gap more visible, because it's not visible at all values.

Firefox left, Chrome right

enter image description here

@keyframes test {
  0% { height: 50px; }
  100% { height: 100px; }
}

div {
  background: black;
  width: 100px;
  height: 50px;
  transform: skew(10deg);
  animation: test 4s infinite;
}
<div></div>
<div></div>

Failed solutions so far: backface-visibility: hidden outline: 1px solid transparent border: 1px solid transparent, negative margins and scale: 1.01 <- This one works in the example but breaks in my Project, just like margins.

skew transform firefox css
1 Answers

I think this is related to how browsers round the fractions while rendering. If the value gets rounded down then the div will be rendered 1px shorter. So there will be 1px gap. For more details refer:
Sub-pixel problems in CSS
How do browsers deal with non-integer values for height and width?


Workaround: We can put a pseudo child behind it which will be 1px bigger: 
body {
  padding: 1rem;
}

@keyframes test {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

div {
  background: black;
  width: 100px;
  height: 50px;
  transform: skew(10deg);
  animation: test 4s infinite;
  
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  inset: -1px;
  background-color: inherit;
}
<div></div>
<div></div>

Old Attempt: One workaround could be to use drop-shadow or box-shadow:

@keyframes test {
  0% { height: 50px; }
  100% { height: 100px; }
}

div {
  background: black;
  width: 100px;
  height: 50px;
  transform: skew(10deg);
  animation: test 4s infinite;
  
  /*filter: drop-shadow(0 -1px 1px black);*/
  box-shadow: 0 0px 1px 1px black, inset 0 0px 1px 1px black;
}

body {
 padding:1rem;
}
<div></div>
<div></div>

Here we are dropping 1px shadow on top side of the div. So it'll cover the gap with same color.

Note: there is a difference between drap-shadow() and box-shadow. Use whichever suits your scenario.

user_152739680
Related