Comments (14)
Thanks for posting the issue.
This week I am little busy. I will fix all the pending issues of react-slick next week.
from react-slick.
No worries, I'm applying little workarounds to my local build (in this case, commenting out the line animating: true
π
).
Also, here's a repro video: https://www.dropbox.com/s/uzesxuacxur7qnc/react-slick-ios.mov?dl=0
from react-slick.
Confirmed the transition
class doesn't get applied in time. (adding a permanent transition: transform;
works as expected.) (for reference, my changes are going here: https://github.com/grrowl/react-slick/commits/bugfixes-and-bowerless)
also, this issue causes sorry, I was wrong on this one.afterChange()
not to fire on iOS at all.
from react-slick.
Thanks, I will review this.
from react-slick.
I'm seeing this issue also and may not be able to use this module because of it⦠shame because it's great work otherwise!
from react-slick.
If you're okay with transitions not working on iPhone (but otherwise functional), you can add my up to date fork to your package.json:
"react-slick": "grrowl/react-slick#bugfixes-and-bowerless",
from react-slick.
If animating state is stuck to true, then for some reason callback attached to transition event is not called.
from react-slick.
That's the fix, in the fork we skip setting state.animating
to true, so it doesn't matter is the callback is fired or not. I haven't noticed any drawbacks (apart from the effect being kinda kludgy on iOS)
Really, the proper fix would set the css transition
property, wait 16ms, then set the css for position
/translate
. That way, it'll transition as expected, then fire the transitionEnd event, and everything would be right in the universe.
from react-slick.
I will spend some time today on this issue and fix it properly.
Really, the proper fix would set the css transition property, wait 16ms, then set the css for position/translate.
Is this specific to iOS
from react-slick.
Yep. From a user's perspective, the library works great on Android Chrome, but definitely does not work on iOS.
from react-slick.
The issue also happens on WindowsPhone and Safari on Mac.
(Chrome is fine)
from react-slick.
This looks like a hard to debug bug. I couldn't understand why transition event in not fired on iOS.
For now, I added setTimeout to disable animation after specified time
https://github.com/akiran/react-slick/blob/master/lib/mixins/helpers.js#L222
This will make sure that slider is not stuck after first swipe.
But it still misses animation effect on iOS. I will try and fix this as soon as possible.
from react-slick.
The hint lay in this stackoverflow post: the main takeaway is "Safari has no idea and follows no spec".
Turns out, the root cause was that it applied -webkit-transform
but the transition
value pointed to unprefixed transform
. Additionally, it won't accept transition
properties with comma-separated values (such as saying "transition -webkit-transform
AND transform
"), so the solution is supplying a webkit-specific transition for the webkit-specific transform.
Tested in Chrome stable, iOS 8.1 Safari and Desktop Safari 8.0.3
from react-slick.
@kriswallsmith, @yuzeh, @FarmerKing This issue on iOS is fixed by @grrowl in #35 pull request.
I tested it on iphone and its working well. You can also test it.
from react-slick.
Related Issues (20)
- Forcing slide animation when scrolling up and down on mobile
- Slider isn't aligned left HOT 4
- Change width of the center slide only
- Performance issue with clones (infinite)
- initialSlide is ignored on breakpoints HOT 1
- currentSlide from afterChange event shows decimal when using SlidesToShow as decimal and infinite:false
- autoplay does not work when PauseOnHover, pauseOnFocus, and pauseOnDotsHover are all true
- Unexpected Behavior in Vertical Mode Swipe HOT 6
- Link Css file not working in Nextjs HOT 9
- Slick Infante is not working HOT 1
- If used infinite, speed will not work
- IOS 14 and up - slider won't scroll on drag
- Get offsetWidth of element in slick-track
- Upgrade to react 19 HOT 1
- React-slick issue HOT 1
- dots are coming as numbers
- asNavFor behavior change after 0.30 release
- I have only one slide and its replicate the inner content three times HOT 6
- Prop "slide" seems not to work
- bug with aria-hidden
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-slick.