How to deal with vanishing 1px lines?

I have a few lines in my app that are only 1px wide, some in height and some in width, and I noticed that sometimes they disappear under various circumstances. For example, when I'm scrolling down, one such line disappears when my scrollbar hits the bottom, and then reappears when my scrollbar hits the top again. Others vanish when I zoom in or out or change the browser size, but they mostly all have pretty unpredictable behavior.

I assume this has to do with my screen not being high-definition enough to render every pixel, so it has to make some sacrifices. I don't have any responsive code in my app, so I can't imagine that anything is happening code-wise to make the lines display:none or the like.

Is there a way I can get these lines to be shown every time I view a page? Also, is this a known problem? Any input would be very helpful.

Example of such a line:

html:

<div class="line"></div>

css:

.line {height:1px;width:100px;background:black;}