scrollreveal
scrollreveal copied to clipboard
Published
20 hours ago •
jlmakes
jlmakes
Demo website doesn't work in Mobile Safari 10.
Environment
- Operating System: iOS 10.3.3
- Browser Version: Mobile Safari 10.3.3
- ScrollReveal Version: latest
At the moment, I don’t have access to that device/browser combination. Can you provide more details about what is not working?
Basically nothing shows up from the revealed page content. Scroll is there, but no visible content.
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.
Are you able and willing to connect your phone via USB to a mac and use the Safari debugger to look for error messages?
No errors. No warnings.
This is the rendered page.
<html class="sr js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="/css/main.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>ScrollReveal</title>
<style>
.sr .load-hidden {
visibility: hidden;
}
</style>
<script src="/lib/scrollreveal.min.js"></script>
<script>ScrollReveal({
scale: 0.85,
duration: 1000,
})
ScrollReveal.debug = true
document.documentElement.classList.remove('no-js')
document.documentElement.classList.add('js')</script>
<meta name="keywords" content="scroll, scrolling, animate, animation, css, javascript, reveal">
<meta name="description" content="JavaScript library to animate elements as they scroll into view.">
<meta property="og:image" content="https://scrollrevealjs.org/img/social-share.jpg">
<meta property="og:title" content="ScrollReveal">
<meta property="og:type" content="website">
<meta property="og:url" content="https://scrollrevealjs.org">
<meta property="og:site_name" content="ScrollReveal">
<meta property="og:description" content="JavaScript library to animate elements as they scroll into view.">
<meta name="twitter:card" content="photo">
<meta name="twitter:creator" content="@jlmakes">
<meta name="twitter:description" content="JavaScript library to animate elements as they scroll into view.">
<meta name="twitter:image" content="https://scrollrevealjs.org/img/social-share.jpg">
<meta name="twitter:site" content="@jlmakes">
<meta name="twitter:title" content="ScrollReveal">
<meta name="twitter:url" content="https://scrollrevealjs.org">
</head>
<body style="height: 100%;">
<div class="crown">
<div class="layout__wrapper" style="height: 100%">
<div class="layout__two-column__aside layout__padding__horizontal">
<a class="no-style crown__logo" href="/" title="Go back to home page.">
<img class="crown__logo__mark" src="/img/logomark.svg">
<img class="crown__logo__type" src="/img/logotype.svg">
</a>
</div>
<div class="layout__two-column__main layout__padding__horizontal">
<nav class="crown__menu">
<a class="crown__menu__link" href="/guide/hello-world.html">Guide</a>
<a class="crown__menu__link" href="/api/reveal.html">API</a>
<a class="crown__menu__link" href="/pricing/">Pricing</a>
<a class="github no-style" href="https://github.com/jlmakes/scrollreveal" title="Visit the ScrollReveal repository on GitHub."
target="_blank" rel="noopener">
<div class="github__star-count">16,044</div>
<div class="github__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" height="100%" viewBox="0 0 438 438" xml:space="preserve">
<path fill="#FFFFFF" d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z"></path>
</svg>
</div>
</a>
</nav>
</div>
</div>
</div>
<div class="floating-button">
<div class="floating-button__open-icon">
<div class="floating-button__bar"></div>
<div class="floating-button__bar"></div>
<div class="floating-button__bar"></div>
</div>
<div class="floating-button__close-icon">
<div class="floating-button__bar"></div>
<div class="floating-button__bar"></div>
<div class="floating-button__bar" style="box-shadow: none"></div>
</div>
</div>
<div class="floating-button__underlay"></div>
<div class="mobile-nav__crown layout__padding__horizontal">
<a class="no-style mobile-nav__crown__logo" href="/" title="Go back to home page.">
<img class="mobile-nav__crown__logo__mark" src="/img/logomark.svg">
<img class="mobile-nav__crown__logo__type" src="/img/logotype.svg">
</a>
</div>
<div class="mobile-nav">
<nav class="mobile-nav__primary">
<a class="no-style list__link layout__padding__horizontal" href="/guide/hello-world.html">Guide</a>
<a class="no-style list__link layout__padding__horizontal" href="/api/reveal.html">API</a>
<a class="no-style list__link layout__padding__horizontal" href="/pricing/">Pricing</a>
<div class="github--container">
<a class="github no-style" href="https://github.com/jlmakes/scrollreveal" title="Visit the ScrollReveal repository on GitHub."
target="_blank" rel="noopener">
<div class="github__star-count">16,044</div>
<div class="github__icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 438 438" xml:space="preserve">
<path fill="#FFFFFF" d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z"></path>
</svg>GitHub</div>
</a>
</div>
</nav>
</div>
<div class="flex-container">
<div class="flex-body">
<div class="layout__wrapper">
<div class="demo layout__padding__horizontal layout__padding__vertical">
<div class="demo__column">
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-red load-hidden" data-sr-id="0" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s;"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-green load-hidden" data-sr-id="2" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-purple load-hidden" data-sr-id="3" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-red load-hidden" data-sr-id="4" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-large">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-orange load-hidden" data-sr-id="5" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-blue load-hidden" data-sr-id="6" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
</div>
<div class="demo__column">
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-orange load-hidden" data-sr-id="7" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s;"></div>
</div>
</div>
<div class="demo__bar demo__bar-large">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-blue load-hidden" data-sr-id="8" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-yellow load-hidden" data-sr-id="9" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-blue load-hidden" data-sr-id="10" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-red load-hidden" data-sr-id="11" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-green load-hidden" data-sr-id="12" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
</div>
<div class="demo__column">
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-yellow load-hidden" data-sr-id="13" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s;"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-red load-hidden" data-sr-id="14" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-orange load-hidden" data-sr-id="15" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-large">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-green load-hidden" data-sr-id="16" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-purple load-hidden" data-sr-id="17" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-yellow load-hidden" data-sr-id="18" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
</div>
<div class="demo__column">
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-green load-hidden" data-sr-id="19" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s;"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-purple load-hidden" data-sr-id="20" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;"></div>
</div>
</div>
<div class="demo__bar demo__bar-large">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-blue load-hidden" data-sr-id="21" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-yellow load-hidden" data-sr-id="22" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-blue load-hidden" data-sr-id="23" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-large">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-orange load-hidden" data-sr-id="24" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
</div>
<div class="demo__column">
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-blue load-hidden" data-sr-id="25" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s;"></div>
</div>
</div>
<div class="demo__bar demo__bar-large">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-orange load-hidden" data-sr-id="26" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-red load-hidden" data-sr-id="27" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-large">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-purple load-hidden" data-sr-id="28" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-green load-hidden" data-sr-id="29" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-red load-hidden" data-sr-id="30" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
</div>
<div class="demo__column">
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-purple load-hidden" data-sr-id="31" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s;"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-yellow load-hidden" data-sr-id="32" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-green load-hidden" data-sr-id="33" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-orange load-hidden" data-sr-id="34" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar demo__bar-medium">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-yellow load-hidden" data-sr-id="35" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
<div class="demo__bar">
<div class="demo__bar__wrapper">
<div class="demo__bar__fill demo__bar__fill-purple load-hidden" data-sr-id="36" style="visibility: visible; opacity: 0; transform: matrix3d(0.85, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
</div>
</div>
</div>
</div>
</div>
<div class="signature">
<div class="left">Made with</div>
<div class="love" aria-label="heart" aria-role="img">♥</div>
<div class="right">by
<a href="https://twitter.com/jlmakes" target="_blank">J.L. Makes</a>
</div>
</div>
</div>
<div class="flex-footer"></div>
</div>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script async="" src="https://js.stripe.com/v3/" id="stripe"></script>
<script src="/js/bundle.js"></script>
<script>ScrollReveal().reveal('.demo__bar .demo__bar__fill', {
delay: 500,
useDelay: 'onload',
reset: true,
})
ScrollReveal().reveal('.demo__bar:first-child .demo__bar__fill', {
delay: 0,
interval: 80
})
// preload pricing illustration
var img = new Image();
img.src = "/img/license.svg";</script>
<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeMetricsController1" allowpaymentrequest="true"
src="https://js.stripe.com/v2/m/outer.html#url=https%3A%2F%2Fscrollrevealjs.org%2F&title=ScrollReveal&referrer=&muid=813d4c95-4a63-4a6e-8c7a-282eafd3a26a&sid=69a7fd8f-3249-4540-955b-06445eeeb797&preview=false"
aria-hidden="true" tabindex="-1" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; visibility: hidden !important; position: fixed !important; height: 1px !important; pointer-events: none !important;"></iframe>
<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeController0" allowpaymentrequest="true"
src="https://js.stripe.com/v3/controller-9c718c509f5d4324cf3e59e858ee60b9.html#apiKey=pk_live_HHWNHVqg6gjpQOc5xLzAPwIp&stripeJsId=a01536b8-21f2-460e-b4a9-9d76c8198ab8&features[noop]=true&origin=https%3A%2F%2Fscrollrevealjs.org&referrer=https%3A%2F%2Fscrollrevealjs.org%2F&controllerId=__privateStripeController0"
aria-hidden="true" tabindex="-1" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; visibility: hidden !important; position: fixed !important; height: 1px !important; pointer-events: none !important;"></iframe>
</body>
</html>
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.pageYOffsetin the console - Type
document.documentElement.scrollTopin the console
What values are output?
I hope this is helpful:
> window.pageYOffset
< 673
> document.documentElement.scrollTop
< 0
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.
I have the same problem with my iPad: a black screen. What about the mobile parameter ? Is it set to false or true ?
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?
You need an Apple computer and an iPad 4 to test (web inspector with a js console). Sorry, I have only an iPad.
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.
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!
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.
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.