search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.39k stars 2.26k forks source link

Some elements are not revealed in Safari #365

Closed davidanquetin closed 7 years ago

davidanquetin commented 7 years ago

Hello,

I am using ScrollReveal.js with anime.js.

My page is constructed with containers (div) that I reveal (with SR) when i scroll under specific height.

Then, in each container, some elements are revealed from the start time when the parent container is revealed. When container#1 is revealed, elements contained in it are revealed, with some delays, and with some animations.

For that, the settings / init of each element of a container is made in the beforeReveal() function of its parent container.

Some elements are <img> with png or svg sources, some are texts. All is created and injected in the DOM (from json datas) before ScrollReveal is initiated.

Everything works on Chrome / Firefox, but on Safari, on scrolling the elements in containers after the second one are not revealed, i have to scroll many times up / down to reveal them.

This url is the better way to see the problem
http://salamandre-infographies.mediatools.fr/gaspillage/

In the console, nothing happens which show a problem, except this two lines : 

ScrollReveal : invalid container "[Object Object]" provided.
ScrollReveal : falling back to default container

(I didn't specified container option, so it uses default one)

I tried to switch svg images in png format, because i saw that there could have some problems with svg in Safari, but nothing changes.

Thanks for your help !

jlmakes commented 7 years ago

In the console, nothing happens which show a problem, except this two lines : 

ScrollReveal : invalid container "[Object Object]" provided.
ScrollReveal : falling back to default container

The console message shouldn’t show up unless you’ve specified an invalid config.container option to the reveal() call... but I don’t think that’s related to your code not working in Safari.

If you can create a simple JSBin demonstrating a ScrollReveal Safari bug, I will promptly look into it—but your current project is just too complicated for me to dig through; seems you have hundreds of lines of JavaScript relating to animation, with almost 80 references to the word "container" and over 50 references to the word "reveal".

davidanquetin commented 7 years ago

thanks @jlmakes

i understand, i will find some time to create a more simple project, and to try to reproduce the safari bug.

The console message shouldn’t show up unless you’ve specified an invalid config.container option to the reveal() call... but I don’t think that’s related to your code not working in Safari.

I think too. I have to specify config.container option ? I thought that if i did not specify it, it would use the default value (window.document.documentElement) ? When i specified another container target, like '#myContainer", it did not work, so i let it with default value...

thanks

jlmakes commented 7 years ago

The ScrollReveal Container is an element with a fixed height and scrollbar. By default it is the <html> element (a.k.a. window.document.documentElement), which uses the browser window and scrollbar.

You shouldn’t have to specify a custom options.container unless you have an element on your page that scrolls separately from the window (like a sidebar menu or custom dropdown list), with children you want to reveal.

Here’s a simple custom container example.

davidanquetin commented 7 years ago

Hello, after many hours, i found my bug. It was some little things that caused problems, but it is not linked to ScrollReveal directly.

1) some custom settings for each reveal were not reseted in a clean way

2) my containers, from which my sequences of reveals were launched, were not positioned in absolute position, only in relative with fixed height. On safari, the detection of positions of each container and each element seemed difficult because of this, when I changed this, put containers in absolute position and specified a top value, each element was good revealed.

Thanks for helping.