transition:none in Chrome/Safari

[Metis77]

While firefox and IE work, in Chrome and Safari transition:none is set.

transition: none 0s ease 0s, transform 0.8s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s, opacity 0.8s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s;

The js should be fine (?):

    /**
     * private functions
     */
    var elements = ('.ce_vimeo_album, .ce_text, .ce_epf_layout');
    var config  = {
        viewFactor : 0.15,
        duration   : 800,
        distance   : "100px",
        delayType  : "onload",
        scale      : 0.8,
        reset       : false, 
        viewOffset  : { top: 20 }
    };


    /**
     * public functions
     */
    var self = {};

    self.init = function(){

        window.sr    = ScrollReveal();
        sr.reveal( elements, config );

        console.log('ScrollReveal');
    };


     /**
     * do stuff
     */


    self.init();

[Metis77]

Seams like the script ran too early (on document.ready).
Needed to wait for window.load, while it is at the very bottom of the document.

[allaire]

@jlmakes Sorry for bringing this up from the dead, but I just experienced this weird issue. My bundle.js file is just before the closing </body>.

When I have:

import { throttle } from "lodash";
import ScrollReveal from "scrollreveal";

// Reveals on scroll

const sr = ScrollReveal();

sr.reveal(".js-foo", {
  delay: 5000,
  easing: "ease-in"
});

I get the following:

<div class="features__image-wrapper js-sr js-foo" data-sr-id="0" style="visibility: visible; opacity: 1; transition: none 0s ease 0s, opacity 0.6s ease-in 5s;"> with transition: none;

The only way I can make this work correctly is by wrapping it onload:

import { throttle } from "lodash";
import ScrollReveal from "scrollreveal";

// Reveals on scroll

window.addEventListener("load", () => {
  const sr = ScrollReveal();

  sr.reveal(".js-foo", {
    easing: "ease-in"
  });
});

Since everything is at the bottom, just before </body>, I didn't expect to have it wrapped onload. Can you shed some light on that behaviour?

I also confirm it works on Firefox (Mac), with or without onload. it does not add transition: none 0s. Using scrollreveal@^4.0.5

Maybe it's caused by a big vendor js payload? Because I can't duplicate it in a JSFiddle

Thanks!

[jlmakes]

The default transition property varies across browsers. According to the tests I ran, there were 4 possible values. See my comments in the source:

scrollreveal/src/instance/functions/style.js

Lines 173 to 182 in 66f44ab

	/**
	* The default computed transition property should be one of:
	* undefined || '' || 'all 0s ease 0s' || 'all 0s 0s cubic-bezier()'
	*/
	if (transition.computed && !transition.computed.match(/all 0s/)) {
	transition.fragments.unshift({
	delayed: transition.computed,
	instant: transition.computed
	})
	}

I don't recall what browser each value corresponds to, but a cursory check suggests that WebKit based browsers (such as Chrome and Safari) use all 0s ease 0s as the default.

Why that value would be none 0s ease 0s in any of the tested browsers is beyond me. Let alone why it would depend upon the page load event, and/or not be reproducible.

That said, it would seem there's reason to include that case in the regex, e.g:

- !transition.computed.match(/all 0s/)
+ !transition.computed.match(/all 0s|none 0s/)

Is that something you can test @allaire ?

[allaire]

Hi @jlmakes, your fix does work! Now everything works as expected.

The only difference versus using onload is that there is no reveal animation when you are already scrolled to an element that is .reveal(), which is expected since the code runs right away.

Found some resources on Google about transition: none 0s:

https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/web_tests/transitions/transitions-parsing-005.html#37

https://github.com/kraj/WPEWebKit/blob/master/LayoutTests/transitions/transitions-parsing.html#L565

75lb/transition-to-from-auto#5

From the tests above, it seems that when transition: none is set, the computed style value should be none 0s ease 0s. Does that make more sense?

[jlmakes]

Cool links, thanks. The Chromium source is especially interesting! This suggests that somehow window.onload impacts whether the transition default value is an empty string, or "none".

Weird :D

In any case, I've added the fix and released v4.0.6

[allaire]

Awesome @jlmakes, thanks for the great work and support. 🍻