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.

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Mar 29 '16 at 15:19
Wouldn`t it be a solution giving your second div -199px instead of -200? then there is no white line in chrome anymore. That would be a quick but dirty workaround. — Marcel Wasilewski, Mar 29 '16 at 15:22
Possible duplicate of [css transform, jagged edges in chrome](http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome) — chazsolo, Mar 29 '16 at 15:30
Thanks for the reply @MarcelWasilewski, the code is just a sample of what the problem , the requirement is to have divs separated by exact distances, so i dont have the luxury of the 199px fix . — moondram, Mar 29 '16 at 15:31
This is kind of a known issue. Add `border: 1px solid transparent;` to both elements and it should go away (commenting from phone so haven't tried but fairly confident that it will). — Harry, Mar 29 '16 at 15:51
@chazsolo : could not solve it using the solutions given in [css transform, jagged edges in chrome ] — moondram, Mar 29 '16 at 16:30
@moondram after I read that post and tried all the answers it seems like none of them were working either... odd. I gave Harry's a shot and it worked. I'll have to remember that one for later! — chazsolo, Mar 29 '16 at 16:37

score 2 · Accepted Answer · answered Mar 29 '16 at 16:46

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>

score 0 · Answer 2 · answered Mar 29 '16 at 18:02

I would move the second element left by one pixel. So instead of:

left: 200px;

use:

left 199px;

See the snippet below:

NB! You could also want to increase the width of the element by 1px to keep the exact dimensions.

.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:199px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;

}

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

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

2 Answers2