Is your feature request related to a problem? Please describe.
See this reddit post. I noticed it when expanding a details element with a long list of definitions.
Describe the solution you’d like
The scrollbar should not take up space.
Describe alternatives you’ve considered
Add an option to disable the scrollbar entirely (not ideal).
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.
I just tested it and It didn’t do anything.
It only shows scrollbars when content doesn’t fit, otherwise doesn’t do anything.
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.
My bad, I thought you were trying to have scrollbar for divs, which is my usecase for defining overflow.
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.
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.
The first answer in that stack over flow question has a picture explaining what the scrollbar-gutter does. It’s not what I want.
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.
Is that what you’re asking for here? That’s definitely not clear. Is something missing from your original message?
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.
That isn’t clear?
Also
I found a hacky solution from
That addition probably helped, but the last sentence of the post, seems a little late. And regardless, you never really say what is wrong, you just jump to possible solutions that don’t work. Even the title made me think that you were asking for a way to make sure the card shifts when the scrollbar is added.
You’re right, but the link he linked to explains the issue.
Here’s the problem: if the scroll bar appears upon revealing the back of the card, the front of the card shifts to the left by the width of the scroll bar.
It can be easily reproduced by reducing the window height and adding a very long (over multiple lines) string into the back side (and having a short string in the front side).
Fair enough, I’m not the best at explaining things. Still the reddit post demonstrates the problem clearly and there are solutions provided by some redditors. Additionally, I made this post in the “suggestions” category, not in help.
I edited the post. I hope it’s better now.
The following might help to visualize the issue for everyone here to play around with. I essentially did the following, editing the default basic note type:
<hr>, so that anki won’t autoscroll.div which has several tiny colored boxes.You can count the boxes to understand better what the issue is.
{{Front}}
<div id="r"></div>
{{FrontSide}}
<hr>
{{Back}}
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
#r {
position: fixed;
top: 50px;
left: 0;
height: 10px;
width: 100vw;
background-image: repeating-linear-gradient(
to right,
black,
black 10px,
lightgreen 10px,
lightgreen 20px
);
}
This is my question and it goes here. Name three possibilities.
This<br>is<br>my<br>superduper<br>long<br>answer<br>that'll<br>trigger<br>a<br>scrollbar<br>and<br>thus<br>will<br>trigger<br>a<br>layout<br>shift.
Before showing back:
After showing back:
If you count the black boxes from the left, you can see that before the back was shown the “T” of “This” was placed after the 5th black box – after the back is shown (and the scrollbar appeared) the “T” of “This” is placed directly on the 5th black box.
Hope that helps.
Oh, I see! It didn’t even occur to me you could be talking about the main post on Reddit, since you had a jumplink that went straight to the comments you started talking about.
That was by accident, I changed it in the edits.
