CSS backdrop-filter affects photo gallery scrolling animations FPS (+ other places)

[Alex0007]

Describe the bug
A clear and concise description of what the bug is.

Swiping photos is unpleasant experience due to FPS drops

• Which site: dev.phanpy.social

To Reproduce
Steps to reproduce the behavior:

1. Go to post with multiple photos, e.g https://dev.phanpy.social/#/mstdn.social/s/110885138853427849
2. Preview first photo
3. Swipe to next photo
4. Observe FPS drops during this action

P.S. you can hide control elements, by tapping photo. After hiding – FPS is no longer dropping (because .plain2, plain3 class elements are hidden)

---

Comment out these two styles and gallery animation framerate will dramatically increase.

I guess this happens because of transparent + blur() on moving photos, which consumes a lot of CPU on each frame

Ref: https://github.com/cheeaun/phanpy/blob/main/src/index.css#L199

:is(button, .button).plain2 {
  background-color: transparent;
  color: var(--link-color);
  /* backdrop-filter: blur(12px) invert(0.1); */
}
:is(button, .button).plain3 {
  background-color: transparent;
  color: var(--button-text-color);
  /* backdrop-filter: blur(12px) invert(0.25); */
}

Smartphone (please complete the following information):

• Device: Google Pixel 6
• OS: Android 14
• Browser Google Chrome 115

Additional context
I have checked locally, that removing those backdrop-filter solves problem, but i'm not a frontend guy, so i don't know how to correctly replace them with somewhat similar

[Alex0007]

Some references

• https://stackoverflow.com/questions/29550422/css3-filter-performance-cpu-usage-why-do-certain-filters-tax-the-cpu
• Poor Rendering Performance caused by CSS blur filter thirdweb-dev/dashboard#703
• Modal Component: CSS Blur filter causing performance issues WordPress/gutenberg#43877
• https://bugzilla.mozilla.org/show_bug.cgi?id=1718471

[Alex0007]

Gallery fix worked 👍

---

div.media-play also hits performance 🥲

Might be a good idea to double-check every place with this filter
backdrop-filter:.*blur\( (21 results in 9 files)

It will really improve users experience. Now it is lagging even on my Macbook M1 Air (not everyone can notice that, but still)

@cheeaun if you don't have time to fix this, just let me know what is resolution strategy for those cases, and i will try to make PR

[cheeaun]

@Alex0007 is this a different bug? I can understand if this lags on a phone but it seems weird that it's lagging on a desktop (especially on M1 😲). Is it possible if you can check/pinpoint if the blur is the main cause for this case, maybe have a user-style to disable all backdrop-filter styles 🙏

[Alex0007]

It is same kind of bug, but in different place (now in "play" overlay above videos, which also has that blur style)

especially on M1 😲

It's not that noticeable on notebook. On the phone you can see micro freezes when blurred element appear on the screen. While on notebook smooth scrolling stops being smooth.

You might think I'm crazy, but this performance problems are really blocking me from using Phanpy on the phone.

Most annoying bug was gallery one and now it's fixed, but maybe it's worth to fix remaining places to get ideal performance

Is it possible if you can check/pinpoint if the blur is the main cause for this case

Now gallery swipes perform great, and I have noticed that before looking into commits history. So yes, it is the case.

Not sure every blur in codebase dips performance. For example header blur is fine, as well as text blur in spoilers (but spoiler with additional elements, like pictures or polls is lagging too)

[Alex0007]

Closing for now until i get more evidence of drops