I am using http://alvarotrigo.com/fullPage to create a simple one page website. Everything is perfect except on iPhone when in landscape mode - when I scroll, instead of the page staying full screen and moving to the next anchor, safari reveals address bar & bottom nav causing content to scale in height.
Can anyone help please?
The problem is not that the bars are revealed, but that they hide when orientation changes. This is a iOS 7 behavior which may not be the same in other phone OS.
At this moment developers don't have control over this behavior of Safari over iOS 7.
The bug has been already reported in the github respotitory of fullpage.js but I'm afraid no solution has been found for it yet:
https://github.com/alvarotrigo/fullPage.js/issues/79
Related
I am using fullpage.js with the "fullpane" theme on my wordpress.
When I open the site on my phone and scroll down, everything looks good and the content containers are where they are supposed to be.
BUT when I scroll up, the position of the content containers is being messed up and they are positioned much higher.
I was able to replicate the problem with multiple browsers (Chrome, Firefox) on Android and iOS and multiple phones.
Interestingly, the problem doesn't persist when I try it in the mobile view of Chrome developer tools.
Thanks in advance for any advice!
Update: I refunded the wordpress theme above and created my own theme.
We're experiencing an issue with an iframe lightbox that occurs mostly on iPad's. The issue is sporadic, sometimes we can get it to scroll, other times it cannot scroll at all.
Here is a live example: http://story-teller-doreen-61750.bitballoon.com/
View this on an iPad, iPad Air, or iPad Pro using safari.
You'll notice that on the iPad, the background with the content scrolls, but the iframe does not scroll. However, sometimes when you change the orientation from portrait to landscape then back, the scrolling then works.
Is there a known solution to this issue? We've already attempted to try all the workarounds posted in various threads on stackoverflow and github with others experiencing this issue using bootstrap modals, but have not had any luck.
I'm making a webapp and want to use all the screen and avoid scrolling if possible. There will be buttons that need to be clicked in many areas of the page.
The area at the bottom of mobile safari is not clickable when the tab bar is open and I rotate to portrait and back to landscape.
I have set the body height to the same as window.innerHeight instead of 100% so that I don't have to scroll to get to buttons at the bottom.
bodyEl.style.height = window.innerHeight + 'px';
It may be the case that this area is not usable for interactive content.
Here is a demo with code:
http://plnkr.co/edit/327sUQ?p=preview
You should be able to open a preview of it on iPhone 6 Plus by clicking on the fullscreen button 'Launch the preview in a separate window'.
Update:
It definitely looks like it was a bug in iOS8, it's working as expected in iOS8.4, 9.0 & 10.2 from my simulator.
I may have found an answer to your issue, but would love to hear if you can confirm. Setting the content of your page to have the following styles:
overflow-y: scroll (allows you to scroll below the viewport, but only if necessary per the length of the content; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
in addition to your height: 100% (which forces the content to fill the viewport)
appears to force the iOS menu (tabs and address bar on top as well as nav bar on the bottom) in Safari to always appear. That way, button clicks to the top and bottom of the page are no longer "dead zones" and will actually work instead of opening up the Safari menu.
I'm searching for a solution for a similar problem - this is not an answer, but an attempt of explanation.
First of all - currently, I cannot confirm this behavior - seems like it's fixed in iOS 8.4 (12H143). Didn't know exaclty in which version I saw it the last time.
Nethertheless, I try to explain what I've found out (until we decided to not bother anymore).
The not clickable area is not always a dead zone. If you scroll up before you click, chances are high you get it working. Thus I think the (empty) standard navigation bar is there (height and behavior of the elements are similar/the same), even if it's empty (all element moved to the address bar) in landscape mode.
Btw.:
There's another (similar) problem with the iPhone 6 plus (not fixed yet).
If you have a position: fixed element on the top of a webpage, in landscape mode and only if there are two or more tabs open (and the tab bar is visible), you can click through this element (even through buttons) - as if the whole thing isn't there.
I know this question is a bit old, but since the issue still exists I thought I should share my experience...
As of now there is NO fix for the issue, but there is a workaround. The solution jennz0r provided may work for some, but I didn't like the idea of the menu bar always showing. I saw a website that had the issue solved... well it seemed to work at least. I didn't find anything in their css or js.
So what was the fix? Since the "dead zone" is 44px in height they simply made their floating bar 88px height :D Users would instinctively tap on the top/center of the button and it will almost always work at first try!
Another workaround would be to simply make the button/bar float 44px from the bottom.
"If it's stupid, but it works... it ain't stupid..." ;)
I am working on a web page, that has to be 100% high. I did it so, it works fine everywhere, except on Android Firefox.
The problem is:
When I open the page for first time, in landscape mode - the address bar overlaps the content.
If I do orientation change - it gets OK in portrait mode, and when I go back to landscape mode - it's OK there too. The problem appears only in landscape mode, before any (eventual) orientation change.
Tried many things, mostly some scrollTo() solutions, but nothing worked.
Thanks in advance.
I believe this is just how the Firefox app works. You could state in your (CSS) style sheet a 10 to 15 pixel "margin-top" for the body. This would create a black space at the top of the page. You could just adjust that height accordingly.
You could also try to check for that browser with a javascript and specify a new CSS with the "margin-top" adjustment if you didn't want it to adjust except on the Firefox app.
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.