I have spent a lot of time trying jquery/javscript "fix" to get this worked. Since the last update of chrome mobile for IOS, the address bar of the browser behaves differently. I'm sure you guys are aware of what I'm talking about: You scroll down your page, the bar hides up, but once you scroll up, it appears. Yes, it is a good user experience, I can tell.
The problem is that I do have fixed element on top of my web app (header), and every time I scroll up, the address bar goes over my fixed element.
I've lookup other web apps (twitter, gmail), and they seems to have found a way to avoid this. I would like to read your ideas of how they achieved it. There is no need to tell me not to use fixed element.
So my question is : is there a way to avoid this? What's your idea of the situation.
example: https://mobile.twitter.com/EmWatson (must see on iphone preferably)
FYI : I use Jquery mobile framework for my web app.
thanks.
Well, I found a way to work.
<body style="overflow:hidden;">
<header style="width:auto;display:block;padding:12px;text-align:center;background-color:#1276c7;color:white;position:fixed;top:0;left:0;right:0;opacity:1;">FIXED HEADER</header>
<div role="main" style="height:100%;overflow-y:scroll;padding:60px 0;box-sizing:border-box;-webkit-overflow-scrolling: touch;">
<article>
...(content)...
</article>
</div>
</body>
It appears that we need an inner scrollable element and remove overflow on body. I overthought it, it seems. Hope this helps someone.
Related
Please run the demo on an iOS device.
I have two pages with similar elements (that have :hover states) and clicking on any element in the first page takes you to the second page.
Problems:
:hover persists between pages
location of :hover remains identical (try tapping different links)
This happens until you interact with the page again.
Demo: https://codesandbox.io/s/ios-persisting-hover-state-se3m1
Has anyone experienced this before? What solutions do I have to fix it? Would rather not have to add a no-touch type class everywhere where I do hover states in my CSS if possible.
Thanks!
This should answer your question: https://humanwhocodes.com/blog/2012/07/05/ios-has-a-hover-problem/
My website flickers out of control when scrolling on iOS mobile. Have't run into any issues on Android at all.
https://s3-us-west-1.amazonaws.com/stage.coefficientlabs.com/index.html
I've read through some similar forums discussing
-webkit-overflow-scrolling: touch;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
But none of my attempts seem to have worked. I think part of it is because I can't tell which specific element is causing the flicker. It just appears to me like the entire website is flickering.
I've used
-webkit-overflow-scrolling: touch;
in the past before, but now when I inspect the code, it says it has an invalid property value. Some others are experiencing the same thing; I think the feature got discontinued or something.
I just want simple, normal mobile scrolling that we're all used to expecting.
Thanks so much in advance!
EDIT
I've found out that once I click the "Click to get started" button, and close the popup, the flicker stops. This doesnt happen with any other buttons, just this one. I've been working on integrating this popup with the rest of the website, so it looks like this is the culprit.
Still dont have any strong leads to pursue...not sure why opening and closing this popup causes the website to respond properly.
EDIT 2
Okay so I removed one CSS sheet and now the scroll works. Trying to isolate what in this CSS file is causing this scrolling issue. Here is the link. Any idea whats going on here?
Okay turns out that the popup wrapper's css property "display: none" was interfering with some of the other css properties(?). I changed this to "display:block" and just coded another way to hide the popup wrapper with z-index. No more flicker!
I'm building a mobile app using jQuery Mobile 1.3.0, EaselJs 0.6.0 and TweenJs 0.4.0.
So, when I load the page, some content gets visually duplicated. The DIVs are not really duplicated, it is just visual.
This bug only appears on Safari (Windows + OSX).
If I click and slide to select the page, the bug disappears.
If I switch page (with jQuery Mobile slide transition), it also disappears.
Here is a screenshot:
My code is massive so I cannot really post it fully here. I've just spent 2 hours playing around with my code to try to fix this. I really have no clue.
If you have an idea and need more information, then please let me know.
Not a pretty answer, but a workaround that worked for quite a few:
This sounds like a possible racing-condition, you can try setting a timeout(couple MS) when the page is loaded and then have it re-renderd after that timeout through switching display: none/block on the body.
I am just finishing off a mobile web application for a client. I have written it using MVC3 and Razor and using jQuery Mobile. Something I hadn't noticed but the client has is that Safari (and only Safari) seems to be able to move around the screen when using the web application. Difficult to explain here but you can slide the whole browser to the left, right, up and down leaving a Grey background behind it, this is not something that other mobile sites do. Does anyone have an idea of what this might be? I don't even know where to start with it! Thanks in advance to all who contribute.
I suppose it has to do with the issue described in this question: jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
Ok for anyone who comes across this I have found the solution. The css that comes with the jquery mobile framework contains the class ui-body-c (with the c being replaced by other letters dependiong on theme). In this class there is a border: 1px solid #ccc;, removing this has removed the issue without changing any styling on the site.
As we all know, iPad do not support the <frame> element, but both Gmail and Ymail could do something similar by creating a 2pane style , and the navi pane (left one) could scroll (in ipad style). May I ask if anyone do have the idea how it created?
Thank you very much.
I don't actually know for sure how they've done it (I can't seem to reach mobile gmail in a desktop browser, and I can't find a view-source feature on my iPad) but I suspect that it's not as complicated as it looks.
Keep in mind that in a regular browser, when there is too much content we get a scrollbar. That's not how the iPad renders long pages. On the iPad, if there is too much content we never get a scrollbar, scrolling is achieved by sliding the content up and down. So what we should imagine is that this is two panes with scrollbars, because that's how it would show up in a normal browser.
From there, it's a much simpler problem. It's probably just two divs floated in a standard two-column layout, each with their overflow set to scroll. Something super-basic, like:
<div>
{the nav list of emails goes here}
</div>
<div>
{the currently-open email goes here}
</div>
<style>
div {
float: left;
width: 50%;
overflow-y: scroll;
}
</style>
There's probably something fancy in there to make each div consume 100% of the available height (it's probably not as simple as height: 100%) but already if either div contains enough content, we'll get individual vertical scrollbars which the iPad will hide, giving us that neat sliding-scroll gesture instead.
I've tested a few of my own apps which were build back in time with Frames. They all worked "normally" are you sure you didnt use the wrong Doctype for your HTML?
Individual block elements with overflow-y:scroll are only scrollable with two fingers on the iPad. That's just the way it is.
So how does Gmail do it differently? Manually, with JavaScript, reacting to various touch events.
Your best bet at the moment is to use iScroll. This used to be a bit un-smooth (compared to Gmail and others' implementations), but the latest version is really good. Try their demo.
It works on iPad/iPhone, Android, and you can even use it in a normal browser using your mouse. It has the nice elastic effect when you reach the top/bottom of a scrollable area, and it has the iOS-style scroll indicator thing that appears on the right during a scroll. It's almost as smooth as scrolling on a native app.
By the way, if you want to examine an iPad-specific website's source, the easiest way is using Safari (I've tried this on 5.0.3 for Mac, but probably works on other platforms too). Turn on the Develop menu (Safari>Preferences>Advanced), then you can set your User Agent to iPad.
You can do the same thing in Firefox, posing as an iPad, but I often find the websites look completely broken. I think this is because many iPad/Android-specific websites rely on Webkit features that aren't present in Gecko. In fact, Apple's iPad guide site, which also uses a two-pane scrolling technique, simply rejects you if you're not (a) sending an iOS User Agent string and (b) using Webkit. And Chrome doesn't have an easy way to change your User Agent string. So Safari is the easiest way to examine these kind of sites.