1197654 - Background image scrolling is jumpy when APZ and e10s are enabled on OS X

Status: RESOLVED INVALID

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

Description

[Chris Peterson [:cpeterson]]

STR:
1. In Nightly, load https://www.amazon.com/clouddrive/home/
2. Watch the background images as you scroll down the page using a track pad or mouse wheel. 

RESULT:
The background images "stutter" as they scroll. The problem goes away if you disable e10s and/or layers.async-pan-zoom.enabled.

Comment 2

[Botond Ballo [:botond]]

This page doesn't actually use background-attachment:fixed, it seems to use some sort of parallax effect to make the background scroll more slowly than the main page content. I filed bug 1201231 to track parallax issues, and I'm making this depend on that.

Comment 3

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

This page is using scroll events to update the position of the background images. They should update to using CSS perspective-based parallax scrolling as described at http://keithclark.co.uk/articles/pure-css-parallax-websites/ in order work smoothly with APZ.

Comment 4

[Markus Stange [:mstange]]

We're about as good as Safari on this page now. There's not much else we can do here.

Comment 5

[Karl Dubost💡 :karlcow]

This is done here in the html page.

    //The main function to perform parallax effect
    function parrallaxOnScroll (imagePanel) {
        // Move the background if the panel is visible
        if( isVisible(imagePanel) ) {
            var panelHeight = imagePanel.height();
            var midHeight = imagePanel[0].getBoundingClientRect().top + (panelHeight / 2); 
            
            var midPercentage = (midHeight / winHeight) * 100; 

            //lets tollerate 50% move up and down of the background image once parts of the image are off screen
            if (midPercentage > 150) {
                midPercentage = 150; 
            } else if (midPercentage < -50) {
                midPercentage = -50;
            }

            // Put together our final background position
            var coords = '50% '+ midPercentage + '%';
            
            imagePanel.css('background-position',  coords );
              
        }
    }

    //activate parallax effect on scroll of .panel or .img-panel elements
    $('.panel, .img-panel').each(function(){

        if (isMobile) {
            return;
        }
        var imagePanel = $(this); 

        // run it the first time to initialize the position
        parrallaxOnScroll(imagePanel);

        $window.scroll(function() {
            parrallaxOnScroll(imagePanel);
        });

    });    


Switching to needscontact.

Comment 6

[Karl Dubost💡 :karlcow]

I wonder if Daniel can help us find the right person at Amazon?

Comment 7

[Markus Stange [:mstange]]

The fix on amazon's side here should be pretty simple: The background-attachment of the image needs to be set to fixed, and the background-position needs to be adjusted in such a way that the image is still in the right place (because background-attachment changes what point background-position is relative to). With that change, the image might still lag a bit (which is unavoidable with async scrolling), but at least it won't jitter up and down anymore.

Comment 8

[Michelle Funches - QA]

You may want me to close this now as Resolved-Works For Me. The jaggyness in the background is not appearing for me in:
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 9

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

I can still see it on OS X. It's probably not as visible on Windows becauase the OS X trackpad scrolling is much faster/smoother so jankiness is more obvious.

Comment 10

[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 11

[Botond Ballo [:botond]]

(In reply to Karl Dubost :karlcow from comment #6)
> I wonder if Daniel can help us find the right person at Amazon?

Daniel, any update on this?

Comment 12

[Karl Dubost💡 :karlcow]

Daniel just reached out on the Amazon partner list.

Comment 13

[Mike Taylor [:miketaylr]]

Attachment: gif.gif

Still an issue on OSX.

Comment 14

[Michelle Funches - QA]

Reproducible for me
Version 	52.0a1
Build ID 	20161109030210
User Agent 	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:52.0) Gecko/20100101 Firefox/52.0

Comment 15

[Mike Taylor [:miketaylr]]

Attachment: Screen Shot 2018-05-31 at 9.40.42 AM.png

Looks like they changed the design.

Comment 16

[Oana Arbuzov [:oanaarbuzov]]

The issue