0

I am attempting to follow this Stripe blog post:

https://stripe.com/blog/connect-front-end-experience

While my final product generally looks like what was in the tutorial, my browser seems to be placing in unintentional gaps. I'm reluctant to call them gaps since gap has a specific meaning in CSS grids, and my error seems to be more of a randomized rounding error.

Here are some pictures for comparison. Safari handles the grid more elegantly than chrome, but there are still issues. Notice the pixilated white lines in the photos.

Stripe final product:

Stripe final product

My attempt on Safari:

My attempt on Safari

My attempt on Chrome:

My attempt on Chrome

Here is the code I am using:

.stripes {
  display: grid;
  grid: repeat(5, 200px) / repeat(10, 1fr);
  transform: skewY(-12deg);
  transform-origin: 0;
}

.stripes :nth-child(1) {
  grid-column: span 3;
}

.stripes :nth-child(2) {
  grid-area: 3 / span 3 / auto / -1;
}

.stripes :nth-child(3) {
  grid-row: 4;
  grid-column: span 5;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.special1 {
  background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}

.special2{
  background: linear-gradient(to left, #1890ff, #42C6EB);
}

.special3{
  background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}

.topRow {
  background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}

.secondRow {
  background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}

.thirdRow {
  background: #42C6EB
}

.fourthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
  
}

.fifthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}
<div class="stripes">
  <div class="special1"></div>
  <div class="special2"></div>
  <div class="special3"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
</div>

After playing around a little bit, it seems the the issue lies in using the linear-gradient. When I switch from a gradient to a solid color, vertical bars go away, but not the tiny aliased lines running along the diagonal stripes. Any ideas?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Connor
  • 269
  • 1
  • 4
  • 13

2 Answers2

4

This is a sub-pixel rendring issue. Unfortunately there is no trivial and generic fix since each browser handle the calculation differently when it comes to values smaller than 1px.

In your case, you can add a background to whole container in order to avoid (or at least minimize) this effect:

.stripes {
  display: grid;
  grid: repeat(5, 200px) / repeat(10, 1fr);
  background:linear-gradient(to top,rgba(66, 198, 235, 0.2),#1890ff);
  transform: skewY(-12deg);
  transform-origin: 0;
}

.stripes :nth-child(1) {
  grid-column: span 3;
}

.stripes :nth-child(2) {
  grid-area: 3 / span 3 / auto / -1;
}

.stripes :nth-child(3) {
  grid-row: 4;
  grid-column: span 5;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.special1 {
  background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}

.special2{
  background: linear-gradient(to left, #1890ff, #42C6EB);
}

.special3{
  background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}

.topRow {
  background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}

.secondRow {
  background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}

.thirdRow {
  background: #42C6EB
}

.fourthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
  
}

.fifthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}
<div class="stripes">
  <div class="special1"></div>
  <div class="special2"></div>
  <div class="special3"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
</div>

By the way if you are looking to achieve only the visual effect you can consider multiple background inside one container instead of all this code:

.container {
   height:1000px;
   transform: skewY(-12deg);
   transform-origin:0;
   background:
     /*special 1*/
     linear-gradient(to bottom left, #1890ff, #42C6EB) 0 0/calc(3*100%/10) calc(100%/5),
     /*special 2*/
     linear-gradient(to left, #1890ff, #42C6EB) 100% calc(100%/2)/calc(3*100%/10) calc(100%/5),
     /*special 3*/
     linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2)) 0 calc(3*100%/4)/50% calc(100%/5),
     /*Top row*/
     linear-gradient(to top, rgb(52, 173, 242), #1890ff) 0 0/100% calc(100%/5),
     /*second row*/
     linear-gradient(to top, #42C6EB, rgb(52, 173, 242)) 0 calc(100%/4)/100% calc(100%/5),
     /*third row*/
     linear-gradient(#42C6EB, #42C6EB) 0 calc(100%/2)/100% calc(100%/5),
     /*fourth row*/
     linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB) 100% calc(3*100%/4)/50.1% calc(100%/5),
     /*fifth row*/
     linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8)) 0 100%/100% calc(100%/5);
   background-repeat:no-repeat;
}
<div class="container">

</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

There is a weird interaction with divs in HTML where if the next div doesn't start on the same line as the previous div ends, it creates whitespace. There are two fixes that I have found to this. One is to start each div on the same line as the end of the previous div. Another is to have a comment between the two divs like so :

</div><!--
--><div>
Jeremyfto
  • 37
  • 6
  • Thank you for the suggestion. Unfortunately when I tried both of your solutions I wasn't able to change my result. Here is a codepen showing another suggested fix: https://codepen.io/anon/pen/pxGZMr – Connor Oct 26 '18 at 21:27
  • not sure why you got upvoted ... we deal with CSS grid so there is no white space – Temani Afif Oct 26 '18 at 21:38