scroll add extra space in safari browser but looks ok in chrome on a Mac

[tim cross]

Im not sure how to correct this. I am using a side scroll without a bar at the bottom. in dreamweaver it shows the same as chrome but in safari it adds extra space around it

The error seems to be within this part of the css code

.content {
/* These rules create an artificially confined space, so we get
a scrollbar that we can hide. They are not directly involved in
hiding the scrollbar. */

border: 1px dashed gray;
padding: .5em;

white-space: pre-wrap;
height: 5em;
overflow-x: scroll;
}

.content {
/* This is the magic bit for Firefox */
scrollbar-width: none;
}

.content::-webkit-scrollbar {
/* This is the magic bit for WebKit */
display: none;
}

Demo

https://codepen.io/tim-cross-the-encoder/pen/pooEQBg

Chrome

Safari brower

Hop you can help

Tim

 

 

[Nancy OShea]

Maybe I'm missing something but what's the point in this?   All hacks have consequences of some kind.  So whenever possible, you should avoid hacks.   And this hack is doubly bad because it takes away the horizontal scrollbar which causes accessibility issues.  So again I ask, what's the point in this?