YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.29k stars 289 forks source link

Clicking between elements and then dragging will randomly highlight/flicker the elements #274

Closed Torniojaws closed 3 years ago

Torniojaws commented 3 years ago

Describe the bug

Random blue highlight / selection of the elements in the carousel.

To Reproduce

  1. Open the project example on Firefox: https://react-multi-carousel.vercel.app
  2. Go to the second example row
  3. Left-click and hold between two images
  4. Drag mouse left or right
  5. It will randomly flash on/off a blue selection overlay.

Expected behavior

Should not flicker.

Screenshots

flicker

Desktop (please complete the following information):

Torniojaws commented 3 years ago

It appears it can be avoided by some CSS. It would be good if this could be included into react-multi-carousel "natively":

<div className="disableSelection">
  <Carousel>
    // some stuff
  </Carousel>
</div>

With this CSS:

div.disableSelection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
YIZHUANG commented 3 years ago

Thank you!