Slideshow border problem

cemsdb

Both the first and last (4th) slides have a bright thin border of the left side of the image. Yet the second and third slide don't.

How does one remove the border on the first and last slide?

saguaros

cemsdb Hi

Could you share screenshot highlighting that border? as I don't see it now.

cemsdb

saguaros Hi Saguaros, I'm attaching two images, one from the first slide and the other from the fourth slide. I'm using Chrome browser. The borders seems to be 1px in width.

saguaros

cemsdb Hi

I reviewed the code of this JA ACM slideshow but there is no element with that border set there.

Could you check with other browser / PC?

cemsdb

saguaros It's not just this JA ACM slideshow, the same issue occurs in the Joomlart Demo template. I just changed the image of the first slide to make the border more visible, please take a look. This occurs in all browsers.

saguaros

I still see no border there:

cemsdb

saguaros I'm not sure why you're not seeing it.

I'm attaching a new image of what's on my screen, which clearly shows a distinct bright border line on the left side of the image.

I'm using Chrome on PC, how about yourself?

cemsdb

saguaros PS, it may not be a border, but a sizing issue.

cemsdb

saguaros PS#2, the line/border in question actually seems to be between all the slides and it's easily visible if someone slowly drags the slides sideways manually. The line seems to flicker while moving.

That's why I think this may be a sizing issue because it doesn't show on the 2nd and 3rd slide, yet it shows in the 1st and 4th slides (even though all slides seems to have it in between them)

saguaros

I send you a recording video: https://drive.google.com/file/d/1j1Jepc00SMRWE2Bm7qF-Gz1nE14EjopW/view?usp=sharing

cemsdb

saguaros Hi Saguaros, thank you for the video. It seems the issue doesn't appear on Apple. Have you tried using a PC?

I used multiple PCs where the line/border is very visible.

saguaros

Yes, my colleagues tested with different PCs but no border there.

As I mentioned, if the border exists, there will code for it but no code found there 🙂

cemsdb

saguaros I don't think it's a border issue, so I'm not surprised by any lack of code. I sincerely believe it's a sizing or alignment issue between different elements, or something else.

It just so happens that when I make changes to the following two lines of code in this particular item the brightness and visibility of the line dramatically decreases (unfortunately it's still visible):

.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}

cemsdb

saguaros The following element also causes interesting results when changed. When the 'flex-wrap' is removed the border on the left disappears (alas, it appears on the right hand side of the image, including showing a little bit of the next slide)

.owl-stage {
display: flex;
flex-wrap: wrap;
}

saguaros

cemsdb When the 'flex-wrap' is removed the border on the left disappears (alas, it appears on the right hand side of the image, including showing a little bit of the next slide)

If so, I added this custom css into your site:

.acm-slideshow .owl-stage {display: block;}

You can check again and see how it goes.

cemsdb

saguaros Hi Saguaros, unfortunately the problem persists.

To help you and your PC colleagues see the problem I've changed all the slideshow images to black. The vertical line is now more visible than ever.

I also recorded two small videos showing my experience (via Windows 'Snipping Tool'), but this forum's platform didn't allow me to upload this video type. Maybe the black slideshow-images will be helpful enough for your PC colleagues to see the problem, if not, we can figure out how to upload/show you guys the videos of my experience.

Lastly, here are some additional comments upon investigating this issue further:

1) As the line flickers it also disappears in certain points allowing one to recognize the line does not emcompass the whole image, it only appears on the left side of each image.

2) Though the line seems to appear between the slideshow images, it's actually above all the further most (1px) vertical pixels on the left side of each image.

Hope that helps. Let me know if you need any more info.

saguaros

cemsdb You can zip the video attach it here.

Or upload it to file sharing site: Dropbox, G-drive, etc... and share me the link.

cemsdb

saguaros Hi Saguaros, here's a link with two videos:

https://drive.google.com/drive/folders/1aPibFTNCPfT7UfI8OV8727U1YSWCevDI?usp=sharing

1) The first videos moves through all four slides rather fast, mostly to show that the horizontal line on the left only shows on the first and last slide (when the slides are still and in place).

2) The second video moves through the slides more slowly, clearly showing how the horizontal line is brightly visible (and flickers) while the slides slowly moves sideways.

I've tested on a handful of PC screens and all of them show the same thing, so I'm puzzled on why your PC peers don't see it as well.

Please let me know if you need more info.

saguaros

cemsdb Thanks for the videos but we still can't see that line.

We temporarily added this custom css:

.acm-slideshow .owl-carousel .item {
	margin: 0 -0.5px;
}

Could you clear cache and see how it goes?

cemsdb

saguaros That fixed it, many thanks! I appreciate your dedication and assistance!

PS, I suppose others (PC, or otherwise) might have similar issues. It might be good to update the slideshow extension with your code 🙂

saguaros

cemsdb Glad to hear that it's working now!

Have a good day!!!