1083997 - Scrolling transition isn't working in Firefox on http://www.apple.com/ca/imac-with-retina/

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[u279076]

I noticed on http://www.apple.com/ca/imac-with-retina/ that there is a background transition on scroll that isn't working in Firefox but it is working in Chrome. When you load the website in Chrome and scroll the background transition is quite smooth. When you try the same in Firefox there is no background transition and the content loaded in the header is garbled.

I'll attach a couple screenshots showing a header comparison and a screencast comparing the transitions on scroll.

Comment 1

[u279076]

Attachment: Apple.com in Google Chrome

Comment 2

[u279076]

Attachment: Apple.com in Mozilla Firefox (Nightly)

Comment 3

[u279076]

I've uploaded a screencast here: https://www.youtube.com/watch?v=Tg7eUa__oLo

Comment 4

[Karl Dubost💡 :karlcow]

Confirmed.  It is working with Opera (blink) and Safari too.
Faking the UA to be Chrome on Firefox Desktop doesn't solve the issue.

The big image is controlled in the CSS, there are a couple of rules dedicated to 
.intro-fallback-image
But the CSS seems sane at first sight.


Also in overview.built.js, there are pieces of JS for this section of the page.


                    this.fallback = w.select('.intro-fallback-image');

then
                    this.scale = {
                      from: this.maxScale,
                      to: this.fallback.clientWidth / this.el.clientWidth
                    };

There is also a strange inline stylesheet in the page, which is bogus.

@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d) {
	 #supportsThreeD {
		 height:3px 
	}

 }

which doesn't exist in Opera Blink source.

I haven't found yet the source of the issue.

Comment 6

[Mike Taylor [:miketaylr]]

Attachment: apple-retina.png

The position of the "background image" (which is a collection of <canvas> elements) is wrong because we never get the required transforms. If you manually add those, it pops back into place. Similarly, when you scroll you can observe the the scale and 3d transform values changing (in Chrome). I suspect that either their prefixing method is busted... or they left us out altogether.

Comment 7

[Mike Taylor [:miketaylr]]

Seems to be here:

s.prototype.ondraw = function (j) {
  if (j.time <= this.tippingPoint) {
    if (!this.introVisible) {
      return
    }
    var m = t(j.time, 0, this.tippingPoint, 0, 1);
    m = this.ease(m, 0, 1, 1);
    var l = t(m, 0, 1, this.scale.from, this.scale.to);
    var g = t(m, 0, 1, this.getOffsetY(), this.translateYTween.to);
    this.el.style.webkitTransform = 'translate3d(-50%, ' + Math.round(g) + 'px, 0) scale(' + l + ')';
    var d = 0;
    var f = 0.4;
    var b = 0.52;
    var n = 0.6;
    if (m <= f) {
      var i = 0.4;
      var a = t(m, 0, i, 0, 1);
      var h = t(a, 0, 1, this.headlineTween.scale.from, this.headlineTween.scale.to).toFixed(5);
      var c = t(a, 0, 1, this.headlineTween.opacity.from, this.headlineTween.opacity.to);
      this.headline.style.webkitTransform = 'scale(' + h + ') translate3d(0, -50%, 0)';
      this.headline.style.opacity = c
    } else {
      if (f < m && m < b) {
        this.headline.style.opacity = 0
      } else {
        if (b <= m && m <= n) {
          var a = t(m, b, n, 0, 1);
          var h = t(a, 0, 1, this.headlineTween.scale.from * 0.9, this.headlineTween.scale.from * 0.8)
        } else {
          this.headline.style.opacity = 0
        }
      }
    }
    if (m > 0.9) {
      var k = t(m, 0.9, 1, 0, 1);
      this.identity.style.opacity = k
    } else {
      this.identity.style.opacity = 0;
      w.setVendorPrefixStyle(this.identity, 'transform', 'translate3d(0, ' + 0 + 'px, 0)')
    }
  }
};

If I add in some w.setVendorPrefixStyle(..)s next to the webkit ones, the headline scales and fades and you scroll, but the bg image is still messed up. But I think it's probably safe to set this as contact ready and try to get apple to update their site... I can figure out the rest if we think it's important.

Comment 8

[u279076]

I'm not able to reproduce this anymore with the latest Nightly. Feel free to resolve this report.

Comment 9

[Mike Taylor [:miketaylr]]

Yep, looks fixed to me too. Thanks.