How to fix a tear between divs? - html

Question

I'm working on a small practice text adventure game project. Lately I have noticed a strange tear that appears between the main story div, and the footer [menu div]. It appears randomly when you scroll the story text all the way down - sometimes it's there, sometimes it's not. The problem occurs both on mobile, and on PC.
The tear is visible here, right below "Newest line" text:
Div tear
Here an image without the tear, with the text not fully scrolled down:
No Div tear
CSS for the two divs:
main
{
font-family: '8bit', Times, serif;
font-size: x-large;
background-color: rgb(255, 255, 255);
height: 32vh;
padding: 2em;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
footer
{
font-family: '8bit', Times, serif;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgb(255, 255, 255);
height: 30vh;
padding: 1em;
}
I have tried several weird hacks, like CSS transform for both of those - it seemed to help with the tearing, but generated other weird artifacts with the box-shadow and such.
The full code is available here:
https://github.com/Akawgan/textRPG
Any ideas what might be causing that, or how to fix it?

Answer 1

I think you have run into the good old "fractional pixel values on a screen with discrete pixels" problem.
The main div has a height of 32vh, which equates to 509.11px on my screen, and probably to similar values on different screens.
There's a lot going on between CSS pixel values and the actual size on screen, so without complicating it I'm going to put it this way: some screen sizes can't handle this exact value. Your div is going to be rounded up or down to some integer value, often times "correctly", sometimes "incorrectly".
There's not much you can do to actually fix this issue, short of choosing another height value.
You might be able to work around it by placing the footer 1px on top of the main element:
footer {
position: relative;
margin-top: -1px;
}
This is a somewhat dirty trick that just superposes both elements in order to cover any gap caused by fractional pixels.

Answer 2

I found a way to 'reliably' experience the problem, by gradually changing the width of the viewport. The phenomenon changed, sometimes the background of the container showed through (I changed it to red so it was obvious), sometimes it seemed to be the greeny background that showed through, sometimes it seemed to be neither but instead a couple of gray lines (of different shades).
It is difficult to prove a negative, but if I removed the reverse of the flex column then I never managed to see the phenomenon.
This has to be speculation but it looks likely that putting your text into the order you want it rather than getting CSS to reverse it may remove the problem.