akiran / akiran/react-slick

Elements overlaid on slides sometimes disappear and reappear on iOS Safari

Aperta
#1,794 5 commenti 2 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
11.9k
Fork
2.1k
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### Issue

Under very specific circumstances content overlaid on top of `react-slick` will flicker on iOS devices.

### CodeSandBox links

* CodeSandBox: https://codesandbox.io/s/react-slick-playground-rntt9
* CodeSandBox app link: https://rntt9.csb.app/

The above CodeSandBox link includes the minimum you need to repro this issue. I made sure to remove everything that doesn't have to do with this bug. It may seem like a contrived example but I ran into this issue in a real app.

This issue is present only on iOS devices.

### Video showing the issue

https://www.youtube.com/watch?v=lbuhSCdXIZI

### Repro steps

See the video above. If you want to replicate yourself see the below steps:

1. Go to the built app using an iOS device (you can use the simulator that comes with XCode, I used the simulated iPhone 11 on iOS 13.4).
2. Swipe through the sliders.
3. Notice that the content overlaid on top of the slider (cat emojis) flickers.

### Possible fix

I "fixed" this issue in my app by setting `useTransform` to `false` and removing the line in Slick CSS that sets the Slick list `transform` property to `translate3d(0, 0, 0);`. Ideally I wouldn't have to do that as using CSS transforms is more performant.

The issue seems to be with the fact that `react-slick` also uses `translate3d` under the hood. If I replace `translate3d` with `translateX` the issue seems to be fixed.

I can attempt to fix this issue and submit a PR if this bug is acknowledged.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.