On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.
Related
http://jsbin.com/nesiside/1 (code is available http://jsbin.com/nesiside/1/edit)
If you scroll down in the document and click the "Lock/Unlock" button, an overlay with text will appear. You'll notice that the scrollbar length has been changed to accommodate the overlay height, not the original page height. Click "Unlock" in the overlay, and you return to the original page, in the previous scroll position.
System works great on desktop browsers, and on my Android phone, however, on iOS there is a rendering flash flash when the overlay is triggered or removed. Ultimately, I believe it is the fault of the scrollbar changing.
I've attempted the usual tricks to resolve iOS rendering issues (webkit-backface, transform3d), with no success.
Apparently, showing the content and hiding the overlay (or vise versa) was to much for the iPad 4 to render at once, causing the flash. This is odd because I tested it on an old Kindle and my Android phone and both are handled it fine with their slow processors.
To resolve the issue, I put the the scrollTop() method (used to return the user to the previous position on the underlying page) inside a requestAnimationFrame function. The result isn't perfect (content can be screen scrolling for a fraction of as section), but it is a much better result than an entire page flash.
In iOS web browsers (Safari, Chrome, etc.), when you click into an input field and the keyboard displays, it keeps the viewport the same size but slides it up partially out of view. This makes creating app-like websites very difficult, as I'm coding a chatting app and when the keyboard shows I want to keep the conversation completely in view, but simply resize the conversation area to fit in the new "resized" viewable area.
I've tried everything, such as having the conversation area be absolutely positioned with left: 0; right: 0; top: 0; bottom: 0, but still iOS keeps the viewport the same size and pushes it up and partially out of view.
Is this possible? Or is it system-level functionality that is beyond control of CSS or JavaScript?
The simple answer is... The soft keyboard is separate from the browser and cannot be controlled by anything inside the browser itself.
Android & iOS both treat the soft keyboard differently so writing something to work across devices is going to be difficult.
iOS Safari doesn't change the size of the browser window. It actually pushes the entire application window up hiding the top portion off the device screen. So, in theory a position: fixed; footer should function the way you expect while headers are pushed up out of sight. (Position fixed is preferable over absolute as its reference point is always the WINDOW.)
In practice it seems to depend on the version of iOS for how fixed positioning actually works. However, as of iOS version 12 you can use javascript to watch changes to window.innerHeight and add a new class when things change.
Chrome on Android seems to physically change the height of the browser window so screen size media-queries might be enough to position things in this case.
As always, there are so many device/OS/screen combos that you should test as much as possible and be aware that you're probably never going to solve for all of them.
Recently i am working on a mobile webapp with a big textarea that needs to constantly display two little buttons on the bottom corners of the viewport. So i started with the basics:
position: fixed;
bottom: 10px;
This works smoothly and looks beautiful on my target devices (iOS >=5, Android >= 2.3). However, the problem starts when i give my big textarea a focus() and a system keyboard appears.
In iOS browsers, the keyboard is just an overlay on the viewport - so the viewport keeps it's dimensions after keyboard is on and half of it is just hidden under it.
In most android devices the keyboard appearance makes the viewport's height smaller and fitted to the remaining area so my position fixed workes here. However, some android devices work just like iOS and the keyboard appears as an overlay.
I'm trying to think of the best way to cover this, not using user agent string. I want this to be a universal solution. I figured out sth like
//check the viewport height
on(focus) -> see if viewport size changed and change position: fixed
But to do this i still need to wait couple seconds after focus to let the window get resized or not + i don't really know where to put my buttons if the viewport stays the same, as i might be on any of the iOS systems (the have different sizes fo keyboard) or on android device with bad behaviour.
What do You think?
I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".
On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.
I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.
Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?
I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.
I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";
Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute.com/. They have a few ways of keeping something at the bottom.
Check out iScroll:
http://cubiq.org/iscroll-4
It seems to be one of the better options out there - definitely worth looking into.
I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.
Best of luck!Dan
I am designing website for mobile access and I want to set page width, height and button sizes, so they display filling up the screen. For example if user is using HTC HD , the whole screen would be 480x800 with button sized 240x200.
However IE mobile as well as Opera load the page with some zoom level, so the buttons display either too large or too small. How can I either read current zoom level in javascript or set it from javascript?
Take a look into <meta name="viewport">. It's supported across a wide variety of mobile platforms, including (AFAIK) iPhone, Android, Blackberry, Opera Mobile and even IE6 Mobile. Basically, it lets you preset the device width, zoom level, and max/min zoom. Have a look at the Apple developer site and for more info.
Also, you can use CSS media queries to detect the shape and size of the browser, and serve up different layouts (etc) accordingly. Again, these are fairly widely supported and the Apple developer site has more information.
You shouldn't rely on using JavaScript on mobile devices because it is still not widely supported across all phones. Instead you should set the width of the page to be the same as the browser width so your pages appear at 100%, e.g. body {width: 100%; margin: 0; padding: 0;}
As for buttons you should use relative values or use different image sizes if you are able to detect the browser width before the page is loaded.