How to remove the white edges that appear in between two skewed elements?

Question

I see a white line between skewed HTML divs on Chrome browser. Below is a screenshot of the issue:

Here's the code :

.abc {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:0px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;
}

.def {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:200px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;

}

A debug sample is available at : https://jsbin.com/dijazit/2/edit?html,css,output

How do we remove this white line? Appreciate any help here.

Answer 1

This is kind of a known issue with respect to rendering transformed elements in Chrome. What makes it more weird is the fact that we come across many similar issues and each time the fix applied for the previous (very similar) case ends up not working for the current one.

For this particular scenario, adding a transparent 1 pixel border around the elements seems to fix it.

.abc {
  position: absolute;
  left: 0px;
  width: 200px;
  height: 200px;
  background: green;
  transform-origin: 0% 100%;
  transform: skewX(-10deg);
  border: 1px solid transparent;
}
.def {
  position: absolute;
  left: 200px;
  width: 200px;
  height: 200px;
  background: green;
  transform-origin: 0% 100%;
  transform: skewX(-10deg);
  border: 1px solid transparent;
}

<div class="abc"></div>
<div class="def"></div>