akiran / akiran/react-slick

Elements overlaid on slides sometimes disappear and reappear on iOS Safari

Aberta
#1,794 5 comentários 2 reações 0 responsáveis Ver no GitHub
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

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.