Scrollbar shifts the card

Anki Suggestions
1

Is your feature request related to a problem? Please describe.
See this reddit post.

Describe the solution you’d like
One of the answers in that reddit post was to add html {overflow-y: scroll} to the css. That seems to be perfect.

Edit: after some testing I discovered that the above css doesn’t do what I thought it did. I thought it made the scrollbar behave like a “position: fixed” element, but it actually just reserves some space for the scrollbar meaning that when there’s no scrollbar, the card is not centered horizontally.

Describe alternatives you’ve considered
There are other solutions in the post, but the average user will just not think about them and keep getting annoyed by this issue. So I think it should be added natively.

2

FYI there’s overflow: auto; too.

I personally don’t know much about it, but some web dev once told me not having this in the stylesheet by default is totally normal. At least for browsers.

One issue I see is if you have a small box, overflow is probably better than scrollbars. Tiny scrollbars can also be an A11Y issue.

3

I just tested it and It didn’t do anything.

4

It only shows scrollbars when content doesn’t fit, otherwise doesn’t do anything.

5

That’s how the scrollbar works by default?
Edit: I think you misunderstood. I meant that the “auto” thing didn’t change the default behavior, i.e. the problem is not fixed.

In any case, showing the scrollbar isn’t the problem. The problem is that when it’s shown, it shifts the card’s contents instead of appearing on top, causing the jittery movement.

6

My bad, I thought you were trying to have scrollbar for divs, which is my usecase for defining overflow.

7

I found a hacky solution from

It uses html { overflow-y: overlay; }. According to people on stack overflow, it’s deprecated. It still works on the current Anki Desktop version.

8

Try setting scrollbar-gutter to auto. I haven’t used this before so can’t give guarantees.

auto (default): No space is reserved unless the scrollbar is visible.

stable: Reserves space for the scrollbar to avoid layout shift.

stable both-edges: Reserves space for scrollbars on both sides (useful in bidi content or when both vertical and horizontal scrollbars are expected).

Okay, I’m not sure. Maybe you’ll need some JS magic.

9

The first answer in that stack over flow question has a picture explaining what the scrollbar-gutter does. It’s not what I want.

10

To be clear, I already have some solutions.

I’m suggesting this to be the default behavior in Anki: The scrollbar should not shift the contents of cards.

11

Is that what you’re asking for here? That’s definitely not clear. Is something missing from your original message?