0

Demo here: https://stackblitz.com/edit/react-gqfvpy?file=style.scss

I have created a grid aimed to allow an horizontal sliding. I have spoted that when I slide, the grid appears with some offset compared to the first grid. Why when I make my grid slides using the "go {direction}"'s button, the second grid's photos appears with some offset compared to the first grid?

I expect that they appear with exactly same positioning.

How is this possible, since I have expicitly set:

display:grid; 
grid-auto-flow: column;
grid-auto-columns:calc(50% - #{$column-gap/2});
grid-template-rows:100%;

in my .grid-container ?

react snippet:

    return (
      <div>
       <GridSlider slideView={slideView}/>


        <div className="button-container">
          {

            buttonToDisplay==="left" &&
              <button 
                className="slide-view__button" 
                onClick={this.slideView}
              >  
                      go right
              </button>
          }
          {
            buttonToDisplay==="right" &&
              <button 
                className="slide-view__button" 
                onClick={this.slideView}
              > 
                      go left  
              </button>
          }
      </div>
      </div>
    );
  }
}

const GridSlider=({slideView})=>(
  <div className="grid-container">
            <div className={`grid ${slideView}`}>
              <div className="grid-item">
                <img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
              </div>
              <div className="grid-item">
                <img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"/>
              </div>
              <div className="grid-item">
                <img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
              </div>
             <div className="grid-item">
                <img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
              </div>
              <div className="grid-item">
                <img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"/>
              </div>
{...}

SCSS' snippet:

.grid-container{
    height:$grid-container-height;
    width:$grid-width;
    max-width: $grid-width;
    //margin:auto;
    overflow:hidden;

    display:grid; 
  grid-auto-flow: column;
    grid-auto-columns:calc(50% - #{$column-gap/2});
    grid-template-rows:100%;

    grid-column-gap: $column-gap;
  background: yellowgreen;  
}

.grid-container > div{
    height:100%; 
    width:100%; 

    grid-area: span 1/ span 2; 
}

.grid{ 
 height:100%; 
 width:100%; 
  display:grid;
  grid-template-rows:repeat(2,1fr);
   grid-template-columns:repeat(4,1fr); 
  grid-gap:10px 7px;
}

.grid div{
  width:100%;
  height:100%; 
  min-width:0;
  min-height:0;
  // background:green;
  border-radius:$border-radius;
}

.grid img{
  width:100%;
  height:100%;
 // background:red;
  border-radius:$border-radius;
  object-fit: cover;
}
8
  • I have created a grid aimed to allow an horizontal sliding. I have spoted that when I slide, the grid appears with some offset compared to the first grid To me the code works, when i click on the button both grids moves ever so slightly increasing the offset from -1 to -1.5 makes it more visible. However to you there seems to be a problem with this, Which you have failed to explain.
    – user7148391
    Commented Jun 5, 2020 at 13:15
  • @ZohirSalak thanks for your comment. What precision do you want? Meanwhile I mean that I have spoted that when I slide, the second grid's photos appears with some offset compared to the first grid. I would expect they appear with exactly same positioning, do you observe this phenomenon -specifically on the right of the grid?
    – DiaJos
    Commented Jun 8, 2020 at 14:28
  • clicking on Go is doing nothing, is your code up to date? Commented Jun 10, 2020 at 10:05
  • @TemaniAfif I have updated it, would uyou mind to try again?
    – DiaJos
    Commented Jun 10, 2020 at 13:16
  • it"s working and see no offset, both seems to behave the same .. maybe add a screenshot of the issue Commented Jun 10, 2020 at 13:36

1 Answer 1

1

Sizes

The pure mathematical value calculated from your translateX(calc(-1 * (60vw + 10vh))) is already correct. I will list some numbers that are computed from your relative values (percentages, vws and vhs) with the body size being 705px, 523.367px with margin 8px.

  • The elements (.grid-item) inside your class .grid have a size of 102.9px, 213.083px
  • The gap between each .grid-item is 7px, as you specified explicitly with a fixed unit
  • The transform value of calc(-1 * (60vw + 10vh)) is -499.7px

Rendering

As you can see from the above sizes, a lot of your elements have some very weird decimal points (e.g. .083, .9, and .7). One pixel is actually the smallest unit. Howver, modern browsers have ways to implement how to render elements with decimal point sizes (subpixel units). We're not going to discuss how browsers handle this. What we know is that when elements are rendered with decimal point values, it can cause a marginally erroneous rendering, often only by one pixel (which is often negligible). In your case, the offset of one pixel seems unpleasant.

The subpixel rendering implementation of each browser is different. As mentioned, this causes erroneous rendering. So the obvious solution is to simply round the decimal values to the nearest integer. Unfortunately for us, your example uses vw and vh. This means that the vw values, for instance the 60vw you used on the SASS variable $grid-width, will only be resolved until after the sizes of the viewport is resolved (I can't find the link where I found this), but your CSS is compiled before then. Using round (a SASS function) here simply doesn't work.

There's nothing much we can do about subpixel rendering. We can only try to avoid it or work around the problem.


Solution

Instead of making the .grid-container with display: grid, we can opt to display the contents as flexbox. Each grid spans the full width of .grid-container and also the full height of .grid-container. Only one grid is shown at a time and each grid is wrapped into the next row of the flexbox. Using translateY and a value of the multiplication of -100%, we can show the n-th grid inside the .grid-container.

The changes you need to make are simply in the .grid-container class, .grid class, and .slide-view class. Here's the runnable code link.

.grid-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: $grid-container-height;
  width:$grid-width;
  max-width: $grid-width;
  overflow: hidden;
  background: yellowgreen;  
}

.grid{ 
  height:100%; 
  width:100%; 
  display:grid;
  grid-template-rows:repeat(2,1fr);
  grid-template-columns:repeat(4,1fr); 
  grid-gap:10px 7px;
  flex-basis: 100%;
}

.slide_view{ 
  transform: translateY(-100%) /* 0% to show the first grid, -100% to show the second grid, and so forth */; 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.