1209058 - Scrolling artifacts on http://www.flagofplanetearth.com

Status: RESOLVED WONTFIX

(Web Compatibility :: Site Reports, defect, P3)

Description

[(no longer active)]

Scrolling on http://www.flagofplanetearth.com with APZ turned on breaks the scrolling effects of the page.  The background image seems to snap around instead of moving smoothly with the rest of the page as you scroll.

Comment 1

[Kartikaya Gupta (email:[e-mail])]

Seems smooth to me but it's probably one of those parallax things.

Comment 2

[Kartikaya Gupta (email:[e-mail])]

This one still looks smooth to me, but I can see that it's implemented using scroll listeners and updating a 3D transform on the element, so I can see how it might get janky. They should reimplement using CSS parallax scrolling as described at http://keithclark.co.uk/articles/pure-css-parallax-websites/ in order to get smooth behaviour with APZ enabled.

Comment 3

[Markus Stange [:mstange]]

The clipping of those parallax images also lags behind due to bug 1214146.

Comment 4

[Kartikaya Gupta (email:[e-mail])]

This site is using the parallax scrolling code provided by squarespace [1]. I don't know where the original source is but [2] is the script linked into the page.

[1] https://support.squarespace.com/hc/en-us/articles/205815488-Parallax-scrolling
[2] https://static1.squarespace.com/static/ta/515c7b5ae4b0875140c3d94a/2681/scripts/combo/?rafscroll.js&mutation-observer.js&site.js

Comment 5

[Abdul Rauf [:haseeb]]

I have reached out the site owner
[e-mail]
http://www.oskarpernefeldt.com/273923/contact

Comment 6

[Markus Stange [:mstange]]

Is there anything the site owners should do here? As far as I can tell, this is just a performance problem in Firefox, and bug 1214146.

Comment 7

[Kartikaya Gupta (email:[e-mail])]

(In reply to Markus Stange [:mstange] from comment #6)
> Is there anything the site owners should do here? As far as I can tell, this
> is just a performance problem in Firefox, and bug 1214146.

The site is updating 3D transforms on elements inside scroll event listeners. Regardless of the other issues, that will not have the desired effect in an APZ world.

Comment 8

[Karl Dubost💡 :karlcow]

The script for the scroll event starts at
https://static1.squarespace.com/static/ta/515c7b5ae4b0875140c3d94a/2682/scripts/combo/?rafscroll.js&mutation-observer.js&site.js

    positionImages: function () {
      if (!this.isMobile) {
        var b = this.scrollEl.get('scrollTop'),
        a = Y.one(Y.config.win).get('region');
        this.parallaxPages.each(function (c, d) {
          var e = this.parallaxImages.item(d);
          if (c.inRegion(a)) {
            var f = this.pageOffsets[c.getAttribute('data-url-id')] -
            b,
            h = - 1 * parseFloat(f * (this.parallaxOff ? 0 : this.PARALLAX_FACTOR)),
            i = e.one('img');
            e.setStyles({
              transform: 'translate3d(0, ' + f + 'px, 0)'
            });
            i && i.setStyle('transform', 'translatey(' + h + 'px) translatez(0)')
          } else e.setStyle('transform', 'translate3d(0, -100%, 0)')
        }, this)
      }
    },



It also contains a bit of user agent sniffing and dependencies on YUI.

Comment 9

[Karl Dubost💡 :karlcow]

putting to sitewait per Comment #5 Thanks Abdul!

Comment 10

[Michelle Funches - QA]

Mac 10.11 is OK; Windows 10 still appears a little janky
Name 	Firefox
Version 	47.0a1
Build ID 	20160201030241
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

Comment 11

[Markus Stange [:mstange]]

I was wrong, this page is not using the "clip" CSS property. They're using two nested elements per image, the outer one having overflow:hidden, and update the transform on both. So this does not depend on bug 1214146.

Comment 12

[Botond Ballo [:botond]]

(In reply to Abdul Rauf  [:haseeb] from comment #5)
> I have reached out the site owner
> [e-mail]
> http://www.oskarpernefeldt.com/273923/contact

Abdul, have you heard back from the site owner about this?

Comment 13

[Botond Ballo [:botond]]

I'm moving apz-evangelism bugs that are ready for attention by the Tech Evangelism team (or already in the process of getting it) into the Tech Evangelism component.

Comment 14

[Abdul Rauf [:haseeb]]

(In reply to Botond Ballo [:botond] from comment #12)
> (In reply to Abdul Rauf  [:haseeb] from comment #5)
> > I have reached out the site owner
> > [e-mail]
> > http://www.oskarpernefeldt.com/273923/contact
> 
> Abdul, have you heard back from the site owner about this?

I didn't heard anything from them

Comment 15

[Oana Arbuzov [:oanaarbuzov]]

This is still reproducible. 
Abdul Rauf can you still try to reach them?

Comment 16

[Abdul Rauf [:haseeb]]

Sure I'll reach out to them again.

Comment 17

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 18

[Jeroen Kruis]

The site no longer uses parallax scrolling, so this issue is no longer present.