search

naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.75k stars 128 forks source link

A bug in Firefox: dragging an image breaks the slider #837

Closed michaelprys closed 10 months ago

michaelprys commented 10 months ago

Description

When I use an <img/> inside of a slide and then test the slider in Firefox I get a bug, where there is no transition from one slide to another. Instead, it seems to move just a little bit with each drag and if I try to drag somewhere in the space between the pictures, then the transition from slide to slide occurs, but only now it is broken, i.e. it may not swipe completely and leave a part outside the container. Another issue is that the image is draggable in X-axis, when normally in browsers like Chrome and Edge it is draggable only in Y-axis.

I don't have this issue in other browsers. It only happens in Firefox. I'll attach the video.

https://github.com/naver/egjs-flicking/assets/112334637/a45bab60-1ad8-4381-8f23-1cf595793e48

Please fix this.

malangfox commented 10 months ago

Hello @michaelprys.

It seems that the image inside the panel is being dragged, interfering with the behavior of flicking. Some CSS props will prevent the image from dragging, but they may not work as well as the Firefox browser. These are CSS props that will prevent dragging in all environments. Can you apply this and see if the issue still occurs?

.panel > img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

It would also be great if you could provide a demo to reproduce this issue.

michaelprys commented 10 months ago

It works with your code, but you could also just add 'preventDefaultOnDrag: true' to the slider options. However, not everybody wants their image to be non-draggable. Essentially we are trying to limit the user's ability to drag a picture when such an option should be provided.

Hello @michaelprys.

It seems that the image inside the panel is being dragged, interfering with the behavior of flicking. Some CSS props will prevent the image from dragging, but they may not work as well as the Firefox browser. These are CSS props that will prevent dragging in all environments. Can you apply this and see if the issue still occurs?

.panel > img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

It would also be great if you could provide a demo to reproduce this issue.

It works with your code, but you also just add 'preventDefaultOnDrag: true', to the slider options. However, not everybody wants their image to be non-draggable. Essentially we are trying to limit the user's ability to drag a picture when such an option should be provided.

michaelprys commented 10 months ago

I think disabling the user-drag might not be a good idea in some cases. Imagine we use a <ItemCard /> component that has an img inside, but we want to use this component in different places. In some places we might need a draggable img and in some places like here in a slider might not. If I put your code where you disable a user-drag for the img inside <ItemCard />, it will disable it everywhere we use this component. I think we could maybe use