Elements overlaid on slides sometimes disappear and reappear on iOS Safari
- Linguagem predominante
- JavaScript
- Estrelas
- 11.9k
- Forks
- 2.1k
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Descrição
### 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.
Guia de contribuição
Avaliação
Esta issue ainda não foi avaliada.