Demo website doesn't work in Mobile Safari 10.

[nicroto]

Environment

• Operating System: iOS 10.3.3
• Browser Version: Mobile Safari 10.3.3
• ScrollReveal Version: latest

[jlmakes]

At the moment, I don’t have access to that device/browser combination. Can you provide more details about what is not working?

[nicroto]

Basically nothing shows up from the revealed page content. Scroll is there, but no visible content.

[jlmakes]

Well, the hidden content is intentional. It’s a part of a strategy to prevent elements flickering on page load (see the docs on User Experience), but it sounds as though the reveal animations are not being triggered 🤔

Unfortunately, I don’t have iOS 10 installed on any available devices, or access to an emulator.

[nicroto]

Yeah, Apple does not make that very easy, unfortunately.

[jlmakes]

Are you able and willing to connect your phone via USB to a mac and use the Safari debugger to look for error messages?

[nicroto]

No errors. No warnings.

This is the rendered page.

```html

Guide API Pricing

16,044

Guide API Pricing

16,044

GitHub

Made with

♥

by  J.L. Makes

```

[jlmakes]

Thank you @nicroto, I appreciate this remote debugging session!

The page has been initialized correctly, and all the elements have animation styles applied. That means almost everything has gone right. What is more, it looks like some of the elements have revealed—I see opacity: 1 on a few.

Can you do me a favor?

• Load the page
• Scroll down about half way
• Type window.pageYOffset in the console
• Type document.documentElement.scrollTop in the console

What values are output?

[nicroto]

I hope this is helpful:

> window.pageYOffset
< 673
> document.documentElement.scrollTop
< 0

[jlmakes]

Thank Nikolay, that looks correct for Safari. The issue must be somewhere else. It seems as though I have no choice but to come back to this issue when I have access to iOS 10.

[twister65]

I have the same problem with my iPad: a black screen. What about the mobile parameter ? Is it set to false or true ?

[jlmakes]

It doesn’t seem to the be configuration. It works fine on iOS 11 Safari.

My guess is that there's something about isElementVisible() not working as intended (which is what I sought to test in the posts above), or that the [delegate()]() isn’t properly being called on scroll events.

In fact, the latter could be tested with:

• Load the page
• Scroll down about half way
• Input ScrollReveal().delegate() into the console

Do elements reveal?

[twister65]

You need an Apple computer and an iPad 4 to test (web inspector with a js console). Sorry, I have only an iPad.

[dijkermans]

Hi, I've tested it with iOS9 and scrollrevealjs.org doesn't work. However, it does work on my site. The problem is "load-hidden". It works when you don't use it. I guess it doesn't override the CSS properly. It does work fine on iOS11+

I believe the script overrides the CSS with "visibility: visible". I would try: "visibility: visible !important"

You can test it on Browserstack.com with a free trial.

[jlmakes]

Thank you @dijkermans!

I really appreciate your insight; this issue has bugged me because I don't have access to those older versions of Safari... but your diagnosis makes a lot of sense!

[romainpoirier]

Probably a related issue, but after testing the demo website using BrowserStack, I can confirm it doesn't work under Safari 10.1 (included, and older versions). This Safari version is still widely used on older Macs.

[jlmakes]

Can confirm the library does work in these browsers, it's just the CSS I’ve used for the site's color bar demo that does not play nicely in Safari 10.

Specifically, it's the .demo__bar__wrapper that renders with height: 0 for yet undetermined reasons.