1305467 - Vertical parallax carousel does not animate w/ layout.css.prefixes.webkit enabled at www.aquilahotels.com

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Mike Taylor [:miketaylr]]

Attachment: Screen Shot 2016-09-26 at 11.52.11 AM.png

STR:

1) In 49 and above, visit http://www.aquilahotels.com
2) Click on one of the tiny navigation birds (they're hard to see... in the middle of the main image on the right)

Expected:
Carousel animates to another page

I also see what appears to be overlapping text in the black context boxes.

If you disable layout.css.prefixes.webkit, it works as expected. So we seem to have broken this website. :(

(assigning to myself for diagnosis...)

Comment 1

[Mike Taylor [:miketaylr]]

Seems like a good place to start:

<!-- parallax.js really screws with the DOM, so make sure it's included last so other things don't notice :) -->
<script type="text/javascript">
if ( $(window).width() > 955) { 
       var newscript = document.createElement('script');
           newscript.type = 'text/javascript';
           newscript.async = true;
           newscript.src = 'scripts/parallax.js';
       (document.getElementsByTagName('head')[0]
        || document.getElementsByTagName('body')[0]).appendChild(newscript);
} 
else {
  //Add your javascript for small screens here 
}
</script>

Comment 2

[Hallvord R. M. Steen]

webkitCSS = document.body.style[ 'webkitTransform' ] !== undefined


	function hardwareCSSTransform( props ){
		if( props.top!=null || props.left!=null ){
			if( webkitCSS ){
				props.webkitTransform = 'translate3d(' + ( props.left || 0 ) + 'px, ' + ( props.top || 0 ) + 'px, 0)';


I presume something fails here?

Comment 3

[Hallvord R. M. Steen]

To quote the entire function:

	function hardwareCSSTransform( props ){
		if( props.top!=null || props.left!=null ){
			if( webkitCSS ){
				props.webkitTransform = 'translate3d(' + ( props.left || 0 ) + 'px, ' + ( props.top || 0 ) + 'px, 0)';

				if( null != props.top  ){ props.top  = 0; }
				if( null != props.left ){ props.left = 0; }
			}

			if( mozCSS || msCSS ){
				props[ mozCSS ? 'MozTransform' : 'msTransform' ] = ( props.top ? 'translateY(' + props.top + 'px)' : '' ) + ( props.left ? 'translateX(' + props.left + 'px)' : '' );
				
				if( null != props.top  ){ props.top  = 0; }
				if( null != props.left ){ props.left = 0; }
			}
		}

		return props;
	}

Since it attempts to handle both -webkit- and -moz- prefixed stuff, but sets props.top/left to 0 after setting the first transform, it ends up creating a settings object like this:

{"top":0,"webkitTransform":"translate3d(0px, -459px, 0)","MozTransform":""}

I'll jump to the conclusion that it tries to set both webkitTransform and MozTransform, and the latter being set to an empty string overrides the former.

Simply adding the word "else" before " if( mozCSS || msCSS )" should fix that (if my hunch is correct).

Comment 4

[Daniel Holbert [:dholbert]]

Yup, I came to the same conclusion/hunch that Hallvord came to. That "else" sounds like the right suggestion.

Comment 5

[Mike Taylor [:miketaylr]]

Sweet, thanks Hallvord and Daniel. Looks like this is an old jQuery plugin: https://github.com/razorfish/Parallax-JS/blob/master/js/parallax.js -- hard to know how widespread its usage was.

This site bug was emailed to me by the webmaster -- so I'll email him and ask him to add the else. Let's move to TE.

Comment 6

[Mike Taylor [:miketaylr]]

Confirmed that adding an else clause fixes it here. I made a PR against the original plugin, mostly for historical purposes and if someone runs into that problem looking for answers. Will email the site webmaster.

Comment 7

[Mike Taylor [:miketaylr]]

(oops, PR link here: https://github.com/razorfish/Parallax-JS/pull/30)

Comment 8

[Mike Taylor [:miketaylr]]

Annnnd FIXED. World-record turnaround. :)~