react-reveal: Not working properly on Safari 11 or IE11
I have implemented this and it is working on Chrome and Firefox however sometimes it doesn’t work on Safari or IE11. After inspecting I have discovered that after scrolling past a Fade element, even after sitting on it for a while and scrolling back and forth, the css for .react-reveal remains opacity: 0.
I have an onReveal callback that successfully works on Chrome as well and this does not get fired on Safari or IE11 either. Here is my implementation:
<Fade right onReveal={this.handleOnReveal}> <img src={Images.TruckLiftgate} alt="truck_with_liftgate" /> </Fade>
When visiting the react-reveal website on safari all the examples work so this must be an implementation problem that is specific to safari/ie. Any help would be greatly appreciated, love this package but we will have to remove it from our upcoming site if we can’t get it working.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 2
- Comments: 24 (2 by maintainers)
This issue is still happening, some elements stop showing because the opacity is stuck in 0 on safari.
Also had this issue in the past, fixed it by removing
transitionproperties in my css within the react-reveal component’s childrenHave someone found a solution or a workaround?
Has anyone found a work around for this? I’m using
overflow: hidden, but I need it for the design of the site I’m building.I used
<Fade top duration={delayDuration} distance="20px" spy appear>in all components a list, and my original problem was that the components’ opacity randomly end at 0, around0.5, and sometimes 1(which it should end), if I focus on another page and comes back, everything gets normal. I used the solution mentioned above, removing alltransition,transition-durationproperties in the child components, and things worked out.