Scrollbar not visible for certain users - javascript

We have a web app which has a fixed side bar used for navigation. The app is built of this template
We are facing a very strange problem where the scroll bar disappears from the html and the page gets cut off. The interesting thing is the scrollbar shows up for 99% of our users but not for the remaining 1%.
We tried everything we could think of including setting the body and html to 100% height and automatic overflow, we also asked those 1% of our users to disable all their browser extensions, clear their cache but nothing helped.
Those 1% still have scrolling issues and their pages are cut off.
What can cause a scrollbar to disappear for some users but not others?

Without actually seeing the page, the only thing I can think of is making sure the scrollbar always shows with overflow content like so.
html {
overflow-y: scroll;
}
Some additional research shows that sometimes Firefox doesn't play nice, so you can try this if that's the case.
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
Source: https://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/

Related

Site doesn't hide address bar when scroll down in mobile browsers on Android

I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages.
But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%.
Similar problem was there: Force hide address bar in Chrome on Android
, but there is no solution for me.
This is not a hybrid app or something else, it's just a site.
I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up.
I think it's just normal behaviour for site by default, isn't?
Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack.
I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.
Have learned following questions here:
hide mobile browser address bar on chrome (android)
How to hide the toolbar in Chrome for Android tablets for a 100% high website
Hide address bar in android chrome browser with scroll down gesture
Hide scroll bar, but while still being able to scroll
How to hide a mobile browser's address bar?
Found a cause. Hope it will help someone who did similar amusing mistake as I.
The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):
html, body, #root {
width: 100%;
height: 100%;}
It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.
Solution is to set min-sizes instead (in addition to removing #root, of course):
html, body {
min-width: 100%;
min-height: 100%;}
Sorry for disturbing, guys)

Smaller window size causing cut off content

I am trying to design a new website for myself but coming across some big problems when trying to make it compatible with smaller devices.
When running the website at larger resolutions and everything looks fine, until you start to drop it down to mobile and some tablet sizes. When the window becomes smaller, I lose content at the bottom of my website, the scroll bar does not go any further. I can kind of fix this but then I get a horrific horizontal scroll bar that is filled with no content.
See image: http://i.stack.imgur.com/98ZzF.png
I have tried using all the overflow methods but still cannot find a fix.
Link to website so you can view for yourself: Website
overflow-x should fix your issue.
body{
overflow-x:hidden;
}

Scrollbar doesn't show up in Chrome on OS X

So I have a site built using the Kentico CMS. On page load, sometimes the scroll bars will not show up in Chrome on Mac. They do show up in Safari, reliably. I previously had this issue with Safari, and added
html {
overflow-y: scroll;
}
to my css, and that seemed to fix it. It's not working for Chrome, however.
I did notice that if I open up the dev console and then close it, it gains a scroll bar. If I change the CSS of an element to be width 99%, rather than 100%, it gains a scroll bar. However, this only works if I change the CSS that targets that element. If I change it just for that element (either with javascript or by modifying the element.style through the console), it does not gain a scroll bar.
There are no JavaScript errors upon opening the console.
My thought was to try to change the CSS itself with JavaScript, but I'm not positive how to do that.
Does anyone have any other ideas? Or how I could accomplish my plan?
I unfortunately can't reduce the problem any further. It seems to be the interaction of the whole site, including Kentico, so it doesn't seem possible to get a jsfiddle or anything.
I have solved the issue. This was caused by the following css:
html {
overflow-y: inherit;
}
I do not know why this caused the problem. I commented out this line, and the issue was resolved.

HTML / CSS - Firefox Mobile - Issue With Height

I am having a scrolling issue with Firefox. I have a JavaScript game that responds to the user's browser size. The game works well with Chrome, etc... But with Firefox there is a scrolling issue.
My game is located here: http://beta.retandoclaro.com.mx/home/play/fr_game/flyingdog/
This game is meant to be played on a mobile phone. The problem is with Firefox, if the phone's screen is small, you have to scroll down to click "Play." When you click Play, it removes the div with the play buttons and shows the actual game. However, Firefox creates a problem where now there is a lot of scrolling because its trying to hide the address bar. The game automatically re-sizes to accommodate the width and height of the user's phone.
I am not really sure how to explain this, so I apologize if I am not making much sense.
I have tried to disable scrolling all together. However, none of these worked for this issue:
html {
overflow: hidden;
}
body {
overflow: hidden;
}
I want to disable scrolling, but I also need to make sure the Play buttons are visible. Is there some JavaScript I would have to write to subtract the height of the address bar from the body so that it all fits in the phone's screen without scrolling?
Thanks for the help!

jAlbum Gallery - Slides Not Displaying Correctly

I am using the jAlbum program with the Lightflow Skin to create a gallery. Works well but when I attempt to navigate the gallery on my laptop and the images will slowly creep up and the titles will disappear. I cannot replicate this issue on my desktop, however, my screen size is large enough that the max image size does not override the screen size. This happens in Firefox (multiple versions) only. In Chrome and IE it displays correctly. Also the Close X is off to the left a bit too much (In all browsers on laptop only).
It would appear that the script is calculating the top property incorrectly.
Here is a bit of code:
<div id="lightwindow_container" style="height: 469px; width: 532px; left: -266px; top: -235px; display: block; visibility: visible;">
For the photos that go off the page if I change the top property I can make it fit the page without issue. (By changing it in Firebug when looking at the page.)
Here is a screenshot showing the issue:
Here are the page(s) in question.
How do I check and see if this is a script error or simply a local browser issue and how do I fix it if it is a script error?
Note: I would add the code but there is so much code it will reach the max limit allowed here in SO.

Categories