I have a very weird bug in my JavaScript library on mobile Safari, that I've tried to reproduce with a simple example:
I have basic css and html:
html,
body {
margin: 0;
padding: 0;
font-family: monospace;
}
body {
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
#term {
background: black;
color: #ccc;
height: 100%;
}
h1 {
margin: 0;
font-weight: normal;
}
html:
...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="term" contenteditable>
<h1>HELLO Mobile</h1>
...
and when I open the website on mobile Safari and open the virtual keyboard, I can scroll down outside of the content.
Here is the screenshot from BrowserStack when I hover over body, I'm not able to hover over html to highlight it.
Does anybody know how to fix this issue? It looks like a basic page.
Here is the link to the website: https://terminal.jcubic.pl/mobile.html
As you can see from the code I've tried to fix the issue by adding:
-webkit-fill-available
Found in an article: CSS fix for 100vh in mobile WebKit by Chris Coyier. But it doesn't make any change.
Is there a way to get rid of that white space, it seems that even CodePen has this issue. Is it a bug in Mobile Safari, is there a hack to fix it?
EDIT:
I think that this is a long-standing issue and Apple doesn't care how miserable users and developers are. Safari on iOS scrolls beyond element when virtual keyboard is opened
Try this:
JS File:
const appHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()
CSS File:
:root {
--app-height: 100%;
}
html,
body {
padding: 0;
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
height: var(--app-height);
}
It may help
Have you tried:
body {
margin: 0 auto;
}
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
We are working on a markup with customized scrollbars.
For this task we use ::-webkit.
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #bfbfbf;
}
::-webkit-scrollbar-thumb {
background-color: rgb(255,51,0);
border-radius: 0;
}
Is working great on desktop devices (chrome)... But on Android Chrome nothing happens.
Is this not working on Mobile? Any workaround or other solution?
Thanks!
I've been having the same problem... So far, the only explanation I've been able to find is that, the custom scrollbars works only if the body has position: absolute.
I don't like this solution as it affects some other features in my site, but unfortunately, there isn't any other way I've been able to show custom scrollbars in mobile...
I'm not sure why it is so... Should be simple enough, but for some reason, it's too complicated!
Kind of a frustrating question for me.
Here's the link. Try it in IE, Chrome and Firefox. The latter two are fine and the image is aligned to the right and appears as 375x500. But in IE, the image aligns to the right, but appears as 15x500.
http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html
When I look at the View Source in IE, the image width and height should be 375x500, but that's not what displays. The image is aligned to the right as expected, but shrunk to 15x500. Thanks for any thoughts...
Here is the CSS
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
I see the problem as well with IE 8. The trouble is your max-width property for the <img>. IE will not render a max-width correctly with the XHTML doctype (which you appear to be using). You can either remove the max-width or use a doctype which will trigger standards mode in IE. I recommend the HTML5 doctype as per this article.
First off, I see about 14 javascript errors in IE when I pull that up stating 'null' is null or not an object. Maybe start there?
EDIT: By the way, I was in IE8
Working Solution:
I removed the <p class="alignright"></p> that was wrapping the image in question, and it worked like a charm.
View in my working jsFiddle demo.
Developing an iPad website I tried to use the CSS property overflow: auto to get the scrollbars if needed in a div, but my device is refusing to show them even if the two fingers scroll is working.
I tried with
overflow: auto;
and
overflow: scroll;
and the result is the same.
I'm only testing on an iPad (on desktop browsers works perfectly).
Any ideas?
Edit following the comment left, kindly, by kritzikratzi:
[Starting] with ios 5beta a new property -webkit-overflow-scrolling: touch can be added which should result in the expected behaviour.
Some, but very little, further reading:
Native momentum scrolling in iOS 5
Original answer, left for posterity.
Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.
Instead, as you've found, users are required to perform the two-finger swipe in order to scroll the overflow-ed content. The only reference, since I'm unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: Two-fingered scrolling.
The only work-around I can think of for this, is if you could possibly use some JavaScript, and maybe jQTouch, to create your own scroll-bars for overflow elements. Alternatively you could use #media queries to remove the overflow and show the content in full, as an iPhone user this gets my vote, if only for the sheer simplicity. For example:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />
The preceding code comes from A List Apart, from the same article linked-to above (I'm not sure why they left of the type="text/css", but I assume there are reasons.
Apply this code in your css
::-webkit-scrollbar{
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
I have done some testing and using CSS3 to redefine the scrollbars works and you get to keep your Overflow:scroll; or Overflow:auto
I ended up with something like this...
::-webkit-scrollbar {
width: 15px;
height: 15px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
The only down side which I have not yet been able to figure out is how to interact with the scrollbars on iProducts but you can interact with the content to scroll it
Solution given by Chris Barr here
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
Works fine for me. Remove event.preventDefault if you need to use some clicks...
The iScroll4 javascript library will fix it right up. It has a hideScrollbar method that you can set to false to prevent the scrollbar from disappearing.
In my experience you need to make sure the element has display:block; applied for the -webkit-overflow-scrolling:touch; to work.
Other 2 peoples on SO proposed possible CSS-only solution to the problem. David Thomas' solution is perfect but has the limit that scrollbar is visible only during scrolling.
In order to have scrollbars always visible, is possible to followin guidelines suggested on the following links:
How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?
CSS - Overflow: Scroll; - Always show vertical scroll bar?
make sure your body and divs have not a
position:fixed
else it would not work
Works fine for me, please try:
.scroll-container {
max-height: 250px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
Use this code, it work in ios/android APP webview; It delete some not portable css code;
If you are trying to achieve horizontal div scrolling with touch on mobile, the updated CSS fix does not work (tested on Android Chrome and iOS Safari multiple versions), eg:
-webkit-overflow-scrolling: touch
I found a solution and modified it for horizontal scrolling from before the CSS trick. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.
Usage:
touchHorizScroll('divIDtoScroll');
Functions:
function touchHorizScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollLeft+event.touches[0].pageX;
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollLeft=scrollStartPos-event.touches[0].pageX;
},false);
}
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
Modified from vertical solution (pre CSS trick):
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/