scrollbar visible on fullscreen mode-CodePudding

I made an image viewer app, that just sends an image to a TV using a raspberry, displaying it on the connected screen via HDMI. The displaying software is Chrome, but I have a tiny problem:

There is a very small area of 4px I have to crop the bottom of the image in order to not see a scroll bar.

Example: Screen Res is 1024 x 768

using a 1024 x 768 pic in fullscreen mode creates a vertial scollbar
decreasing the y pixels by 4 (1024 x 764) makes the scrollbar disappear, but shows me a white border under my image in Chrome for Linux fullscreen mode.

I have no fancy css or html code whatsoever:

let content = document.getElementById("content");
let ImageDiv = document.createElement("IMG");

ImageDiv.src = pic.file

content.appendChild(ImageDiv);

with only very little of css:

body {
    margin: 0;
}

what is the best way to get rid of the border and the scrollbar?

Edit:

https://jsfiddle.net/jLv74co6/1/

Minimal example. not really sure if it helps, as the problem could be related to the chrome linux version.

CodePudding user response：

::-webkit-scrollbar {
    width: 0;
    height: 0;
}
body {
    scrollbar-width: none;
}
img {
    display: block;
}

The first two blocks gets rid of the scrollbar on most browsers (all modern ones) and the display block gets rid of the bottom white border for the image