Remove or blur line on horizontal scroll?

Question

I'm working on a horizontal scrolling website utilizing "Skrollr." I am attempting to line up pictures and make a scrolling loop. However there seems to be a very thin white line in between the pictures regardless of what I do. Is there anyway to make the sections/pictures overlap by a few pixels or any other solution to solve this? I created a JSFiddle to demonstrate the problem. I've also listed my basic set up below.

https://jsfiddle.net/9xvu128g/

Update: This happens regardless of the images used see this 2nd JSFiddle: https://jsfiddle.net/9xvu128g/5/

#slides-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#slides{
width: 200%;
height: 200%;
position: fixed;
top: 0;
left: 0
}

Appears as though the image itself is not properly set up to tile seamlessly. — Scott, Jul 19 '16 at 20:15
Hey Scott. This happens regardless of the image used. Check it out — AndrewLeonardi, Jul 19 '16 at 20:17
Appears to be due to the transform being at 100%. Using 99.9% seems to correct it -- https://jsfiddle.net/NotInUse/9xvu128g/6/ -- just played a bit. 99.99% may work best. Of course you realize that image isn't a seamless image either. It's doesn't line up to itself correctly when comparing left/right sides of the image. — Scott, Jul 19 '16 at 23:37
I don't see any problems - could you post a screenshot of what you mean? — Timothy Chen, Jul 21 '16 at 20:18
Hey @TimChen Check out the 2nd JSfiddle in the question. Scroll down till you reach the center — AndrewLeonardi, Jul 21 '16 at 20:20
Interestingly Chrome on my PC has the unwanted white line but on my Mac it does not — skyline3000, Jul 23 '16 at 02:44
I can see the line on chrome OS X, both latest versions. I often have problems with that when using more complex styling :/ — actimel, Jul 25 '16 at 16:54

Rahul Arora · Accepted Answer · 2016-07-21T20:32:00.327

here is the working fiddle. I gave a negative 1px margin-left to slide 2 and it solved the issue

https://jsfiddle.net/vndgqndc/

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    -ms-transform: translate(100%, 0%); /* IE 9 */
    -webkit-transform: translate(100%, 0%); /* Chrome, Safari, Opera */
    transform: translate(100%, 0%);
     z-index: -1000;
     margin-left: -1px;
}

OR alternatively, you can set the translate to 99.9% as stated by Scott

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    -ms-transform: translate(99.9%, 0%); /* IE 9 */
    -webkit-transform: translate(99.9%, 0%); /* Chrome, Safari, Opera */
    transform: translate(99.9%, 0%);
     z-index: -1000;
     margin-left: 0px;
}

This nearly solves the problem. The issue is if you have more than 2 slides margin-left stops working. Also I was having to switch between 99.9% and 200.01% etc to make it work on more than two slides. Likely will mark this as correct if there are no more official answers. Thanks for the help! — AndrewLeonardi, Jul 22 '16 at 12:25

score 1 · Answer 2 · answered Jul 24 '16 at 15:53

1

Another posibility would be to scale slightly the slide

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    transform: translate(100%, 0%) scale(1.001);
     z-index: -1000;
}

fiddle

answered Jul 24 '16 at 15:53

vals

61,425
11
89
138

I had a quick play around with this, and this was the best solution I could find. – Alexander Holsgrove Jul 25 '16 at 11:56

score 0 · Answer 3 · answered Jul 21 '16 at 20:26

One option is to set the background color to black on the body.

Alternately, you can set a background color on each slide background. In this example, I set the background color to black on both images: https://jsfiddle.net/vdtaylor/9xvu128g/7/

I'm not 100% sure, but I believe you're running into an antialiasing on the edges of the image?

#slide-1 {
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    z-index: -1000;
    background-color: #000;
}

Remove or blur line on horizontal scroll?

3 Answers3