akiran / akiran/react-slick

Elements overlaid on slides sometimes disappear and reappear on iOS Safari

未關閉
#1,794 5 則留言 2 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
JavaScript
星號
11.9k
分支
2.1k
PR 合併指標
30 天內沒有已合併 PR

描述

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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。