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

Explorer ,
Oct 18, 2019 Oct 18, 2019

Copy link to clipboard

Copied

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

Screenshot 2019-10-17 at 17.43.46.png

Safari brower

Screenshot 2019-10-17 at 17.43.31.png

 

 

Hop you can help

 

Tim

 

 

 

 

Views

306

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 18, 2019 Oct 18, 2019

Copy link to clipboard

Copied

LATEST

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?

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines