Btukfyl

I have a weird issue where lines or squares are showing up out of nowhere and I believe its related to overflow: scroll

Example 1: I have a div that as I scroll up and down a vertical line starts to appear and it gets more and more visible. It's a white line right to the left of the content.

Before: https://i.stack.imgur.com/ECri5.png

After: https://i.stack.imgur.com/RrMD6.png

Here is the css for that div:

position: fixed;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: auto;

background-color: #000;

color: #fff;

padding: 50px;

height: 200px;

overflow: scroll;

Example 2: In this example a grey square appears randomly in the top left of the div. Sometimes it shows up, sometimes it doesn't and when it does show up, it shows up after a random amount of time, it's not always there immediately.

Before: https://i.stack.imgur.com/n0IVa.png

After: https://i.stack.imgur.com/yrwCC.png

Here is the css for that div:

display: block;

float: left;

width: 14.342%;

padding: 5px;

box-sizing: border-box;

border: 1px solid #ccc;

overflow: scroll;

If I remove overflow: scroll these things go away.

Anyone ever experience anything like this or have any idea what's going on?Any help or insight would be greatly appreciated.