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?
Related
I have a flutter web app, when I open my web app in my iphone 7 , the starting html page is still behind the Route stack pages, I mean when I swipe horizontally(popping the pages in iphone => I mean like backbutton in android but swiping horizontally from left to right in iphone) the white screen(the started html page) shows and the web app rebuild itself and after that when I swipe horizontally again, it seems that the white screen is gone and everything works fine, but everytime that I close the web app and reopen it again, this senario repeats.
here is the video of what I mean:
https://www.dropbox.com/s/bo332qjlawsbe4a/RPReplay_Final1646636021.mov?dl=0.
be careful, I don't mean that I want to omit the first white screen,my problem will be from the first screen(orange screen) and this senatio is not happening in android devices and browsers.
thanks a lot.
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?
I am having a problem with making my mobile app home screen look like the image below, I have tried using grids but everything aligns to the left.
Has anyone successfully used grids in jquery mobile as home screen with icons?
I created a quick example that should help you on how to create such a home screen.The reason everything aligns to the left in your trys might be because you added style="text-align: left" to your grids? Cant really tell without any code from your side. Here is the
Example
I have a client that wants the desktop version of foundation 4's top bar to appear on the ipad instead of the mobile version. This is fine as their site only has a few sections, but each section has sub-pages and so the nav displays dropdowns for each link.
I modified the break point and the nav looks fine on the iPad, and tapping a parent link displays the submenu - but I can't get the dropdowns to close once one is open - you can switch between dropdowns, but tapping anywhere else on the screen makes the dropdown flash off and then it reappears.
I've tried adding some JS to catch clicks anywhere else on the document body, and to hide any visible sub menus, but it's not working, I still get the off/on flash - I can't see anywhere in the foundation.topbar.js that would be overriding it, but I also can't think of anywhere else in the code that would cause this.
Does anyone have any experience of getting these desktop-version menus to work nicely on an ipad? And before you say 'the ipad is a mobile device, you should use the mobile nav that works' - I already tried convincing the client of that and they didn't go for it :/
Easiest solution:
if (Modernizr.touch) {
$('.top-bar-section ul li .parent-link.js-generated').show();
}
foundation already prepares the top level nav item to be shown in the dropdown of the mobile menu. You can use this also on desktop version of the menu on touch screens like iPad.
Andrea
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.