Image Shuffler + CSS animation [issue][solved]

Image Shuffler + CSS animation [issue][solved]
0

#1

I’ve been working on an image shuffler on Codepen, but I have a little issue with a white line in the middle (only on some sizes, so make sure you resize the browser to see the issue)… It’s probably because I’m playing around with vw and vh, don’t know exactly :slight_smile:

If anyone has any idea how to fix it, let me know! :smiley:


#2

Seems it’s “built-in” rounding error in browser when calculating size of the boxes.

This works: line 38 - try change box height to 11vh, or 20 vh… etc, because white line is the background where is no .box element positioned.
Make .box bigger - Background image still loads “full” and then cropped to fit the box, so in that case - box is higher so image covers more area, and background layer in these “white lines” is not visible anymore.

Next-row .box will be placed over the “tail” of the image which we got from previous step so overall image would look normally

UPD Nice prog, btw


#3

I’ve changed the width and height to be: 11vw/vh instead of 10vw/vh. That fixed the issue! :slight_smile: