akiran / akiran/react-slick

Elements overlaid on slides sometimes disappear and reappear on iOS Safari

Đang mở
#1,794 5 bình luận 2 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
11.9k
Fork
2.1k
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.