Highlighted

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

Explorer ,
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

198

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

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

Explorer ,
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

199

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
Oct 18, 2019 0
Adobe Community Professional ,
Oct 18, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

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
Reply
Loading...
Oct 18, 2019 1