Carousel draggable outside of element

[mk2moo]

Hi,

I have multiple carousels in a masonry style layout. I am finding that if 2 carousels are next to each other, then you are unable to drag the other without finding a space where the carousel overlaps.

I used this sandbox which has exactly what I needed and doesn't have the issue in question:

https://codesandbox.io/s/embla-carousel-github-issue-28-gyst0?file=/index.html

From that sandbox I took the the embla css and the following script:

`var emblaNodes = [].slice.call(document.querySelectorAll(".embla__viewport"));
var options = { loop: false, align: "center", containScroll: "keepSnaps" };

var emblaCarousels = emblaNodes.map(function(emblaNode) {
return EmblaCarousel(emblaNode, options);
});`

Implemented it into mine and just removed basic padding and margin values whilst also amending the slide width depending on styling. Overall, the same minus some minor tweaks.

I would have taken the whole JS but it would only work on the first two carousels but I have used the above before.

Here is a link to a video showing the issue:

https://photos.app.goo.gl/a6npYjuXSbFudSyeA

Untitled.mp4

I would post a link to my site but I'm not sure whether that is deemed ok in guidelines. If that would help I can.

[davidjerleke]

Hi @mk2moo,

The following video link you shared doesn't work: https://photos.app.goo.gl/a6npYjuXSbFudSyeA. I’m guessing that it’s a link to your private Google Foto account. GitHub supports videos now so you can just download the video, edit your original post and drag & drop the video.

Best,
David

[mk2moo]

Hey David,

Sure, I hope this helps. It is an odd one as I adjusted your sandbox here to be flex and all on one row which didn't have an issue.

Here is a link to a quick layout using the same column css - https://codesandbox.io/s/lively-sea-hxtwp?file=/index.html

Thanks,
Liam

[mk2moo]

Hey @davidjerleke,

I added a link above with just the basic containers.

However, I have just created this sandbox which shows the issue. It's just the first link but with embla added in.

https://codesandbox.io/s/lively-hooks-39svo?file

I used the css and script from one of your previous sandboxes here:

https://codesandbox.io/s/embla-carousel-github-issue-28-gyst0

Thanks again

[davidjerleke]

Thank you for the further details @mk2moo.

It's not often I get to say this, but it seems like this is a browser bug. I've created a CodeSandbox without the Embla script and added a fake carousel, meaning just the HTML and CSS for it. And I translated the carousel content with translate3d() in order to show slide 3.

Seems like the translated content is clickable when you add a mousedown event to the container element, even if has overflow: hidden; set. The clipped content of an element with overflow: hidden; shouldn't be clickable. You can test this in the CodeSandbox I modified. A mousedown on the yellow column shouldn't trigger anything, because I've only attached a mousedown event listener to the turquoise column.

I think you should create a bug so the Chrome team can fix this issue.

Best,
David

[mk2moo]

hey @davidjerleke ,

Thank you for taking a look and feeding back. I'm inclined to agree with you. I just changed to a flex layout and it didn't have the issue so it seems to be something to do with overflow hidden and css3 columns layout. Annoying because it's an easy way to do masonry without JS etc.

I'll add a bug for the chrome team. May have to look at a JS masonry implementation in the meantime and try this again in the future.

Again, appreciate the investigation into this.

Thanks,
Liam

[davidjerleke]

Sounds good @mk2moo. I agree. It's a pretty annoying bug. Good luck creating the bug and let's hope that the Chrome team can fix it soon 👍.

Cheers!
David