akiran / akiran/react-slick

Elements overlaid on slides sometimes disappear and reappear on iOS Safari

Ouverte
#1,794 5 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
JavaScript
Étoiles
11.9k
Forks
2.1k
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

### 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.

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.