1738838 - Scrolling down to the footer will show the white background shortly when passing the band photo

Status: NEW

(Core :: Panning and Zooming, defect, P3)

Description

[Karl Dubost💡 :karlcow]

tldr: In the scrolling case there is a subtle difference in between Firefox/Safari vs Blink browsers.
In the resizing case, there is no difference.

This is minor and not urgent.

Some explanations below.

1. Go to https://www.windhand.band/
2. scroll down and up a couple of times where the background-photo is hidden behind a black footer.

Expected:
Black footer just hides the picture

Actual:
There's a brief white area visible.

An easier way to reproduce, is to scroll down at the bottom of the page and resize down or up the window and we can see the delay in recomputing the position values of the image.

I can reproduce. This is visible in this profile.
https://share.firefox.dev/3nNLMTO

I don't know why this is happening.

I can reproduce it in Safari Technical Preview.
And I can reproduce it more easily with Edge Canary (same than chrome if I resize the window by pulling it toward the bottom).

I have the feeling it's because of the size of the background and the parallax effect. It has a cost.
ah they the position of the image dynamically. So yes there is a computing cost to assign the value dynamically.
https://assets.squarespace.com/universal/scripts-compressed/common-0e17b93e22081d94c1f49-min.en-US.js

    function h(e, t) {
      var n,
      o = e.cropMode,
      r = t.parentNode,
      s = e.dimensions.width,
      i = e.dimensions.height,
      a = s / i,
      c = {
        height: r.clientHeight,
        width: r.clientWidth
      },
      l = f(c.width, c.height, e).parentRatio,
      u = l.toFixed(1);
      return t.getAttribute('data-parent-ratio') !== u && t.setAttribute('data-parent-ratio', u),
      n = 'cover' === o && l < a || 'contain' === o && a < l ? c.height / i : c.width / s,
      e.stretch || 'contain' !== o || (n = Math.min(n, 1)),
      n
    }

<div class="Parallax-host-outer" style="">
  <div class="Parallax-host" data-parallax-host="">
    <div
      class="Parallax-item"
      data-parallax-item=""
      data-parallax-id="55947113e4b0ff871f60f1e7"
      style="
        top: 146px;
        left: 0px;
        width: 1084px;
        height: 1157px;
        transform: translate3d(-1084px, 0px, 0px);
      "
    >
      <figure
        class="Index-page-image loaded"
        data-parallax-image-wrapper=""
        style="
          bottom: -72px;
          overflow: hidden;
          transform: translate3d(0px, 693.75px, 0px);
        "
      >
        <img
          data-src="https://images.squarespace-cdn.com/content/v1/558c9954e4b07b434c0cce7a/1531354141084-KHXZFVFNKKFMGUYFQY7H/windhand-eternal-return.jpg"
          data-image="https://images.squarespace-cdn.com/content/v1/558c9954e4b07b434c0cce7a/1531354141084-KHXZFVFNKKFMGUYFQY7H/windhand-eternal-return.jpg"
          data-image-dimensions="1600x1152"
          data-image-focal-point="0.5,0.5"
          data-load="false"
          data-parent-ratio="0.9"
          style="
            font-size: 0px;
            left: -311.472px;
            top: 0px;
            width: 1706.94px;
            height: 1229px;
            position: relative;
          "
          alt="windhand-eternal-return.jpg"
          class=""
          data-image-resolution="2500w"
          src="https://images.squarespace-cdn.com/content/v1/558c9954e4b07b434c0cce7a/1531354141084-KHXZFVFNKKFMGUYFQY7H/windhand-eternal-return.jpg?format=2500w"
        />
      </figure>
    </div>
    <div
      class="Parallax-item"
      data-parallax-item=""
      data-parallax-id="5b4e404003ce649c3467f1d1"
      style="
        top: 2900px;
        left: 0px;
        width: 1084px;
        height: 1818px;
        transform: translate3d(0px, -3772px, 0px);
      "
    >
      <figure
        class="Index-page-image loaded"
        data-parallax-image-wrapper=""
        style="
          bottom: 258.5px;
          overflow: hidden;
          transform: translate3d(0px, 436px, 0px);
        "
      >
        <img
          data-src="https://images.squarespace-cdn.com/content/v1/558c9954e4b07b434c0cce7a/1535656256665-5IZW9GHO9G0U3KTQC9DY/windhand-eternal-return-band-relapse-records-2018.jpg"
          data-image="https://images.squarespace-cdn.com/content/v1/558c9954e4b07b434c0cce7a/1535656256665-5IZW9GHO9G0U3KTQC9DY/windhand-eternal-return-band-relapse-records-2018.jpg"
          data-image-dimensions="1200x800"
          data-image-focal-point="0.5,0.5"
          data-load="false"
          data-parent-ratio="0.7"
          style="
            font-size: 0px;
            left: -628px;
            top: 0px;
            width: 2340px;
            height: 1560px;
            position: relative;
          "
          alt="windhand-eternal-return-band-relapse-records-2018.jpg"
          class=""
          data-image-resolution="2500w"
          src="https://images.squarespace-cdn.com/content/v1/558c9954e4b07b434c0cce7a/1535656256665-5IZW9GHO9G0U3KTQC9DY/windhand-eternal-return-band-relapse-records-2018.jpg?format=2500w"
        />
      </figure>
    </div>
  </div>
</div>

They have set a will-change but I don't think it changes much of the performance.

.tweak-overlay-parallax-enabled .Parallax-item [data-parallax-image-wrapper] {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	-webkit-transform: translatez(0);
	transform: translatez(0);
	will-change: transform;
}

So the issue is happening in all 3 browsers, but is slightly more visible in Firefox on scrolling, but really visible on resizing the window in the 3 browsers.

Comment 1

[Botond Ballo [:botond]]

It looks like the site is implementing a parallax effect (which is a scroll-linked effect) using JS.

The experience should hopefully be improved by bug 1367770 (which is currently being worked on), but a complete solution would involve the site using scroll-linked animations instead (also being worked on but probably farther away from being released).

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Yeah, indeed this will be fixed by bug 1571758, I confirmed the site works pretty fine with my local patches for bug 1571758.

(In reply to Botond Ballo [:botond] from comment #1)

The experience should hopefully be improved by bug 1367770 (which is currently being worked on), but a complete solution would involve the site using scroll-linked animations instead (also being worked on but probably farther away from being released).

To be clear, using scroll-linked animations solely (without bug 1367770 fix) wouldn't fix this issue. Scroll linked animations are based on the same machinery for scroll linked effects. The situation has been improved since bug 1730998 though.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

This case wasn't fixed by bug 1571758, when I commented comment 2 the local patches probably didn't use our scroll linked effect detector, so I presume the site doesn't use scroll events. I am not sure it's using rAF or not.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

In fact the site is listening scroll events to move the images and using the events for the parallax effect. You can easily check it by disabling the scroll event handler on the html element (there are two scroll event handlers, the first one is the one) in devtools thanks to bug 1492497.

In the scroll event handler, the script uses requestAnimationFrame and mutates transform property in the callback so that we fail to detect the scroll-linked effect.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)

In the scroll event handler, the script uses requestAnimationFrame and mutates transform property in the callback so that we fail to detect the scroll-linked effect.

I happened to notice that the MDN document for scroll event describes exactly same manner, listening scroll event and invoking requestAnimationFrame. FYI I've opened an issue on the MDN content github, I'd hope it will be fixed soon.