livebook icon indicating copy to clipboard operation
livebook copied to clipboard
verified publisher icon livebook-dev

Modal flicker

Open psugihara opened this issue 1 year ago • 1 comments

Environment

  • Elixir & Erlang/OTP versions (elixir --version): Erlang/OTP 27 [erts-15.0] [source] [64-bit] [smp:16:2] [ds:16:2:10] [async-threads:1] [jit:ns] [x86_64-pc-linux-gnu], Elixir 1.17.2, Phoenix 1.7.14
  • Operating system:
  • How have you started Livebook (mix phx.server, livebook CLI, Docker, etc): Docker on hugging face
  • Livebook version (use git rev-parse HEAD if running with mix): 0.14.2
  • Browsers that reproduce this bug (the more the merrier): mac safari desktop

Current behavior

I see this flicker on almost every modal: Add secret, Add file storage, Add environment variable, but not on the "?" user profile edit button.

https://github.com/user-attachments/assets/9dc09fb0-cf9a-4f8c-841f-0e2831f5fc0d

Also here's a weird flash of unstyled content that consistently happened on every single load. Guessing this is from using font-display: swap https://github.com/user-attachments/assets/7d585c74-19aa-4067-b1cc-0c3940c58409

Expected behavior

No jank, no wiggle!

psugihara avatar Sep 24 '24 14:09 psugihara

Beautiful, thank you! They seem to be JS/CSS issues, we will dig deeper.

josevalim avatar Sep 24 '24 14:09 josevalim

Thanks for the report!

Interestingly the modal flicker happened only on Esc, and not backdrop click. That said, I've just updated LV to 1.0.0-rc.7 and it appears to be fixed :)

As for the font case, it doesn't happen in Chrome. In Safari, when I refresh, it look like all text in bold flickers specifically, so I assume it's just Safari misbehaving.

jonatanklosko avatar Nov 21 '24 11:11 jonatanklosko