Rails compatibility: Don't apply aria-busy styles on <html> element #215
Replies: 2 comments 2 replies
-
|
Hey @mattbrictson I just stumbled over the exact same issue, that @picocss together with @rails / @hotwired Turbo makes my page jump on every navigational click. Thx for explaining what is causing this issue. Do you have any CSS styles to reset the |
Beta Was this translation helpful? Give feedback.
-
|
I haven't tested it thoroughly, but this snippet of CSS seems to work: html[aria-busy="true"]::before {
all: unset;
} |
Beta Was this translation helpful? Give feedback.
-
|
That actually does the trick, thank you! |
Beta Was this translation helpful? Give feedback.
-
|
This was fixed in #349! |
Beta Was this translation helpful? Give feedback.
-
Pico is great! I primary use it with Rails.
By default, Rails will apply
aria-busy=trueon thehtmlelement when browser navigation actions are in progress. This results in a visual glitch with Pico. Pico applies a loading spinner on any element witharia-busy=true, including thehtmlelement. So anytime you click a link or a button in a Rails app, Pico puts a spinner icon on the root of the page, causing all content on the page to shift down.To fix this, it would be great if Pico could add a
:not(html)to itsaria-busy=trueselector.What do you think?
Beta Was this translation helpful? Give feedback.
All reactions