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!
Related
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)
Good day.
There is a page CSS/HTML - http://promocodesoft.com/q/kupon.html
And when I scroll through this site on an iPhone, or on an iPad (only on Safari browser), it scrolls very slowly, unlike other devices. I think the problem lies in JS of something else?
That is, when I scroll through any site and let go of my finger, then by inertia the site scrolls itself for some time. But on Apple devices there is no such inertia. Scrolling stopped immediately when I removed my finger.
What could be the problem?
see video how it works - https://www.youtube.com/watch?v=Fqkr-qKzfl8&feature=youtu.be
You need to add the following CSS to the page to make the scrolling smooth in Safari on iOS devices:
body {
-webkit-overflow-scrolling: touch;
}
The page seems to set the overflow-scrolling to auto, which makes the scrolling stop immediately after releasing the finger from the screen.
could you please help me out with the following problem?
context:
Let me start of saying I'm a amateur / hobbyist webdesigner, far from anything professional. I've been busy making a website for my business. The portfolio section contains a horizontal mousewheel scrolling section, so the images read from left to right.
I have made the website with muse, and implemented some custom CSS and JS code in there to make the horizontal scrolling happen. my knowledge of JS is limited.
problem:
Everything works fine, except in safari. Here the horizontal scrolling doesn't work. This has to do with overflow-y:hidden I have set at html and body. If I remove this, the scrolling works in safari BUT without the overflow-y: hidden, the website will not show properly in responsive mode as it will exceed the content height, showing a big blank space underneath the content where the user can swipe down to. I tried a lot of things but unfortunately I feel I'm at a dead end. Could anyone please help me out?
goal:
desktop mode: allow horizontal mousewheel scrolling in safari
responsive mode: don't show big empty space beneath content
website URL:
http://www.jellevdvegt.nl/kam.html
I searched all over but can't find a solution. I have a mobile website using a container div (width and height 100%). I use -webkit-overflow-scrolling: touch; to make the content in div smooth scrolling.
However, normally when you scroll down in an iphone your addressbar will shrink and the controls at the bottom totally disappear. Because of the container div having the same size as the body the phone does not detect scrolling in the body. And therefor it will not optimize screen availability.
Does anyone know a good workaround?
I fiddled with BRIM and other JS solutions but nothing seems to work. Thanks in advance.
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;
}