Scrolling does not minify iphone browser - javascript

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.

Related

Large SVG area is not smoothly scroll-able in mobile

I have a hybrid mobile app. Some of my pages include large area of interactive SVG images(graphs, charts). I have already added -webkit-overflow-scrolling: touch; to my content area. This helps in smooth scrolling where the SVG image is not there. But when I try to scroll on the SVG, this is not smooth at all.
Please suggest any other work around possible for this kind of problems.
.oj-hybrid-applayout-page {
-webkit-overflow-scrolling: touch;
}
You shouldn't use complex/large SVGs if you want to smooth scrolling, they really impact the performance on webview when scrolling. There is nothing you can do to fix that.
If you use images, you should also consider compressing them and not use full blown PNGs where possible.
Also welcome to SO.

JS / CSS Horizontal mousewheel scrolling website bugs out in safari

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

ng-view will not auto hide address/navigation bar on mobile devices

I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.
This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.

How do I fix a sticky scroll on a mobile responsive website?

I am building a mobile responsive website.
I noticed that when scrolling the page using an iPhone, the scroll is sticky and not smooth, while on android mobiles it's ok.
What can be the cause of this sticky scroll? I cant even see it on my browser! Please take a look at my code on JSfiddle. The images won't load but you don't need them anyway (you can see their borders). I recommend you to use 320px width to view the page so the icons are all organized.
So there is this line you can add to your body or the main div: -webkit-overflow-scrolling: touch;
Made the trick.

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!

Categories