Open Bug 1209058 Opened 5 years ago Updated 1 year ago

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

Categories

(Web Compatibility :: Desktop, defect, P3)

defect

Tracking

(Not tracked)

People

(Reporter: ehsan, Unassigned)

References

(Depends on 1 open bug, )

Details

(Keywords: polish, webcompat:site-wait, Whiteboard: [gfx-noted][apz-evangelism][squarespace framework] [sitewait])

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.
Seems smooth to me but it's probably one of those parallax things.
Depends on: apz-parallax
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.
Whiteboard: [apz-evangelism]
Priority: -- → P2
The clipping of those parallax images also lags behind due to bug 1214146.
Depends on: 1214146
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
Whiteboard: [apz-evangelism] → [apz-evangelism][squarespace framework]
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.
(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.
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.
putting to sitewait per Comment #5 Thanks Abdul!
Whiteboard: [apz-evangelism][squarespace framework] → [apz-evangelism][squarespace framework] [sitewait]
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
Keywords: polish
Whiteboard: [apz-evangelism][squarespace framework] [sitewait] → [gfx-noted][apz-evangelism][squarespace framework] [sitewait]
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.
No longer depends on: 1214146
(In reply to Abdul Rauf  [:haseeb] from comment #5)
> I have reached out the site owner
> info@oskarpernefeldt.com
> http://www.oskarpernefeldt.com/273923/contact

Abdul, have you heard back from the site owner about this?
Flags: needinfo?(Abdulraufhaseeb)
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.
Component: Panning and Zooming → Desktop
Product: Core → Tech Evangelism
Version: unspecified → Trunk
(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
> > info@oskarpernefeldt.com
> > http://www.oskarpernefeldt.com/273923/contact
> 
> Abdul, have you heard back from the site owner about this?

I didn't heard anything from them
Flags: needinfo?(Abdulraufhaseeb)
This is still reproducible. 
Abdul Rauf can you still try to reach them?
Flags: needinfo?(Abdulraufhaseeb)
Priority: P2 → P3
Sure I'll reach out to them again.
Flags: needinfo?(Abdulraufhaseeb)
Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

You need to log in before you can comment on or make changes to this bug.