"This site appears to use a scroll-linked positioning effect" issue on Firefox

[sunknudsen]

This issue is a:

• Bug report

Recently noticed zoom out transition (while scrolling) is choppy on Firefox. I opened console and following messages is present.

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

Expected behavior

Fluid transition with no console warning

Actual behavior

Choppy transition with console warning

Steps to reproduce behavior

Issue is present live at https://sunknudsen.com/privacy-guides/how-to-make-sure-app-is-not-running-in-the-background-on-macos.

Let me know if I can help further debug this issue. My gut feeling is it should be reproducible using any use case of image-zoom/issues/new on Firefox 84.0.2 (64-bit).

[rpearce]

@sunknudsen Yes – great report! I am aware of the scrolling imperfection and am working on all this in the rewrite branch that is probably 30% done. There are a LOT of things to consider.

[sunknudsen]

Hey @rpearce,

I recently implemented modern-normalize and noticed the scrolling performance glitch on Firefox was significantly less present although the following warning still appeared in the console.

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

The following CSS is what is responsible for the "fix" (see https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css#L208-L232).

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

[rpearce]

@sunknudsen It looks like code you're referencing is there to

Restore the focus styles unset by the previous rule.

So the moz-focus-inner gets unset and then gets reset by this rule... It might be early, but I'm not quite understanding how setting the outline to 1px dotted fixes the issue...

Relatedly, I don't think I would want an image zooming library to determine the focus styles of a site?

[sunknudsen]

Relatedly, I don't think I would want an image zooming library to determine the focus styles of a site?

I agree... I was naively suggesting that this CSS could perhaps be set only in the context of react-medium-image-zoom.

Before considering a PR, I wanted to share my findings... I believe adding this "hack" to the docs (if it isn't implemented in code) could benefit others.

Also, given it is recommended by Sindre in the context of a CSS reset, I guess it has been peer reviewed and is considered good practice.

I have to admit I am a bit of a Sindre fanboy though. 😛

[rpearce]

If the issue remains when I get this darn thing done, I'll do that. Thanks for finding this and reporting back

[rpearce]

Update on v5 FYI: #274

[rpearce]

Should be closed now with the release of 5.0.0. Let me know if you see this again!