I'm having an issue with the browser of the Google App on iPhone (known simply as "Google" in iTunes).
Background: on iPhone, both browsers (Google Search & Assistant and Safari) have a bottom nav-bar that appears/disappears as you scroll up and down a website page.
In any case, in many of my sites, I have a button in most pages, with position "fixed" to the bottom of the screen. In the Google browser, when I scroll up and down the page, this button appears/disappears and is replaced by the bottom nav-bar.
And when the bottom nav bar disappears and the button reappears, it is not clickable as it seems that there's an invisible layer that prevents it from happening. The "normal" behaviour in these cases seems to be for the bottom nav-bar to reappear. So, in fact, this button becomes "unclickable".
Now, when I try the same pages using Safari, the browser is "smart enough" to nudge the button up, keeping it clickable.
If you want to have a sense of this behaviour, you can find it in this page: https://www.avenuefive.com.
Why is this? Is this a bug of Google App? A feature that is not supported (fixed position)? Or something else altogether?
Related
My iOS app has some html5 pages. When you slide upper or down, then comes the question ,if you slide quickly , the page will block at some point, looks like the effect of the bounds property of scrollview,but just the opposite, it cann't show the full content on the page .only if you slide quiet slowly, then the other content on the page shows. It drives me crazy....
Say you've got a Xcode app with embedded web view exposing a simple HTML5 page.
This page has a title and an input tag and a nav top bar (position: fixed; top:0;).
When the user tap in it the first time, the whole screen scrolls up to enable the keyboard appears while maintaining the input tag visible, when I tap the enter button.
The issue I face is that my HTML is not restored identically (I mean, it scrolls down back, but my top bar is shifted about 10 pixels below the top edge of the screen.
But when I tap the keyboard hide button, the scrolls restore my initial view, with no issue.
Anyone experienced the issue before? Any clue of what going on or a way to work around this?
Ps: issue is present on iOS 7 (7.1.2). I didn't tested on iOS 8 as my app must support iOS 7.
I finally ended up with adding an explicit keyboard withdrawing by applying blur() the the input as follows:
<input ng-change="$(this).blur()">
This immediately makes the keyboard disappearing, while the hw initial scrolling is reversed.
I created a mobile version of my website, testing along the way on my Nexus 5. After testing on iOS 7 (on an iPhone4 and iPhone5S), seems like scrolling on the side menu is broken.
Here's a live demo (no links work, and you'll see a huge CSS & JS file, since it's for the whole app): http://www.altertecnia.com/menu/
Click on the top left icon, and the menu is displayed. Now, on desktop and Android, I can scroll the whole page (including the menu) just fine, and click on the right side of the menu to close it. But on iOS7, when I try to do that, only the background (content of the page) scrolls, not the menu.
Any ideas what could be causing this?
This is not a question about JQM panels scrolling independently of the page, though that is an issue I've had trouble with and almost overcome, this is about making the panel scroll smoothly and ignore the device browser's edge event (or whatever the correct term is, I'll explain below).
Basically, I'm trying to replicate the menu on Google's mobile site, which naturally isn't using JQM like us common folk. I've got it pretty close, but the scrolling animation is very rigid. I need it be momentum-based rather than fixed to your finger.
Also, when you reach the top or bottom of the menu, it's considered the extremes of the document so the browser moves the whole document up or down to indicate the edge of the page. Instead, the page should never move while the panel is open and the menu should take on this behaviour within the panel.
Since I've set the panel height to 100%, this forces the address bar on iOS Safari to come down when the menu is open. This seems to be exactly what happens on Google, but if there's a way around this I'd love to hear it.
Finally, one downside of the way I've emulated independent scrolling is to just set the content wrap as fixed when the panel is open. However, this means the page always scrolls to the top when the panel opens. Any alternatives for this would be appreciated. I suppose I could just set the page top as scrollTop or something.
To summarise:
Panel menu needs to scroll smoothly (momentum rather than direct touch)
Elastic edge on menu rather than window
iOS Safari address bar interfering with height
Page fixed at top when panel open
If any of my descriptions don't make sense, just visit google.com on your phone and check out their menu.
ScrollFix seems to have solved all my issues.
I have a sticky nav which becomes fixed to the top of the screen when the user scrolls down the page. It's working fine apart from on the iPad. The first time you click a link on it, it works. But after you've clicked a link once, when you click any other links they don't work.
Any ideas?
http://debourg-dev.ch/syselcloud/le-cloud-computing/
Many thanks