search

slidevjs / slidev

Presentation Slides for Developers
https://sli.dev
MIT License
32.6k stars 1.31k forks source link

positioning of built in slide editor wrong #1573

Open gureckis opened 4 months ago

gureckis commented 4 months ago

Describe the bug When opening the slide editor in Safari 17.4.1 (Sonoma 14.41) and also Chrome (124.0.6367.119) the slide editor spacing and alignment is off. When it is in "sidebar mode" it actually appears below the slide.

Screenshot 2024-05-06 at 10 26 09 AM

When it is in "dock to bottom" mode, it doesn't actually go down to the bottom but sort of hang with a lot of white space below.

Screenshot 2024-05-06 at 10 26 16 AM

In the first case it should just go to the right side of the window. In the second case it should probably align to margin-bottom: 0; and either fill all the space or give more room to the slide letter boxing.

To Reproduce Steps to reproduce the behavior:

  1. open the slide deck
  2. click the "Show editor" menu item
  3. Toggle either "Dock to right" or "Dock to bottom"

Desktop (please complete the following information):

KermanX commented 4 months ago

Thanks for your report. I've noticed this strange behavior before, but I can't reproduce this now. Could you share the data in the local storage (con be found in the "application" panel in Chrome DevTools) when the bug happens?

gureckis commented 4 months ago

Sure here is an example:

Screenshot 2024-05-06 at 11 47 34 AM

I had one strange situation where it was messed up in Safari and I opened Chrome to the same URL and suddenly everything snapped into place in both browsers. I can't understand how that could happen and maybe I'm going crazy (can't repeat it) but thought to mention.

KermanX commented 4 months ago

I had one strange situation where it was messed up in Safari and I opened Chrome to the same URL and suddenly everything snapped into place in both browsers. I can't understand how that could happen and maybe I'm going crazy (can't repeat it) but thought to mention.

Thanks for your information! According to this, I can remember something now. IIRC, this issue is because some UnoCSS classes are missing.😢

gureckis commented 4 months ago

Actually just replicated it. First, I opened the editor in Safari and it displays wrong. Next, I opened chrome pointing it at the same localhost URL (http://localhost:3030/). Suddenly the Safari editor snapped into place in the background. Perhaps the CodeMirror editor rewrites something on the server side when it connects to chrome?

Screenshot 2024-05-06 at 11 52 15 AM
KermanX commented 4 months ago

Actually just replicated it. First, I opened the editor in Safari and it displays wrong. Next, I opened chrome pointing it at the same localhost URL (http://localhost:3030). Suddenly the Safari editor snapped into place in the background. Perhaps the CodeMirror editor rewrites something on the server side when it connects to chrome?

If the UnoCSS class controls the grid layout is not loaded, the editor will be in the wrong place. And after the page is opened in another browser, somehow the UnoCSS class is loaded in the server, and the old page can also receive the class.

gureckis commented 4 months ago

interestingly doesn't appear to be a problem on Arc browser (1.41.0).

UPDATE: I was wrong it affects ARC too, oddly intermittently. However I found a reliable fix:

There doesn't appear to be any cookies set by the program so I believe this is resetting local storage. I checked the values in local storage and they don't seem to be changed by resetting. So I think it is something like "if there is local storage already set at the time the Vite process launches then there is an error in rendering, if local storage is cleared/doesn't exist then the page loads correctly"

KermanX commented 2 months ago

I saw this strange behavior happening multiple times later. I can confirm that this is caused by UnoCSS classes grid-cols-[1fr_max-content] not getting its CSS generated:

https://github.com/slidevjs/slidev/blob/1142d8311357c2e4794b41cd4b7756a587b45f8b/packages/client/pages/play.vue#L47

However, I can't reproduce this in a stable way. @antfu, what do you think may cause the class name not to be processed by UnoCSS?

gureckis commented 1 month ago

I was able to fix this in my theme by adding that class to unocss's safelist: https://github.com/gureckis/slidev-theme-neversink/blob/41738acad5cbd4274fbc4cf90c8e498132cf554b/uno.config.ts#L199. perhaps not pretty but works.