I'm working on a site optimized for iOS7. i found out that, On orientation change to landscape on safari mobile the site goes to full screen but the browser blocks some pixels of height and width top and bottom of the view. Any touch or tap events in the area will not do what we expect it to do but it just comes out of the full screen view and triggers browser options.
1.This is a screenshot of fullscreen view and when i click on "what is twitter?" and fullscreen turn off and options view is shown(second image)
2.This is the second image where we can see upon clicking "what is twitter" we get this view
Is there any possible way we could over ride that tap?
I think I may have found an answer, but can't confirm when switching between Portrait and Landscape. Setting your content to have the following styles:
height: 100% (allows content to fill the viewport and go beyond the bottom)
overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!
If I understand your question right, your link is on the bottom of your page.
You have to add some space to the bottom of the page (the height of the safari icon bar).
Though this helps only if the user scrolls all the way down to the bottom.
The non-clickable Area is relative to the browser viewport, not to the page height. So when a button (or something else) is inside that area where the toolbar appears, you can't click it on first try.
Related
I'm building a full screen slider. The last slide is supposed to have a horizontal scrolling area. I'm using css translations (for a smoother animation) to bring the div inside of the viewport.
For some reason, the scrollbar won't work unless you resize the window.
My guess is that when the scrollable div is created outside of the viewport, it is not rendered by Chrome (for performance reasons?).
Then I guess when you resize, the whole thing gets calculated and redrawn and then it is taken into account.
Here is a JSFiddle that illustrates my problem.
http://fiddle.jshell.net/f3thbjqc/6/show/
Here's a video that illustrates my problem (when I wiggle the mouse is when I try to scroll right, unsuccessfully. Then I resize, and it starts working).
My setup: Mac os High Sierra. Both Chrome 69.0.3497.100, and Safari 11.0.1 (13604.3.5) behave the same, firefox doesn't have the bug somehow
Had a similar problem with the materiallize framework when i was usings tabs and a slider inside. The problem was the slider was not working and after I resized the window it was working perfectly.
Try to fire this event manually when the slider is in view
window.dispatchEvent(new Event('resize'));
I've run into a glitch in chrome on iOS where "scrolling" the screen down after an input focus causes the keyboard to obscure the bottom part of the page and a user cannot scroll down to see the elements below (this is where I have a textarea). This happens only in the iOS Chrome browser, not safari.
I'm going to walk through the steps to try and make this as clear as possible.
A user focuses the textarea input. The behavior is as expected here: the keyboard pushes the screen up.
If the user doesn't scroll at all and taps out of the input then this behavior will continue the next time they focus in the textarea (keyboard pushes the entire screen up).
If the users drags the screen down to scroll up while the textarea is focused (no matter how little they "scroll") the screen has a snap-like effect and the keyboard covers the bottom of the content. This keyboard behavior is preserved...
the keyboard continues to cover the content this way each time the user taps in and out of the textarea.
The only way I have found to reset this effect is to pull the screen up when the textarea is not focused. This causes a little flicker effect and when the user clicks into the textarea the keyboard goes back to
I have "scrolling" in quotes because there is no actual scroll happening on the page as the height, body, and form are all 100% the height of the browser. The virtual keyboard really just pushes the viewport off the screen in the first scenario.
I made a video of the issue here: https://youtu.be/yD0tjMfy5I8
I can't find any information about why this is happening and I've not had any luck trying to style the form differently because (from what I can tell) there is no way to find the height of the visible area when the keyboard is opened (window.innerHeight doesn't work)
Has anyone found a way around this glitch?
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 have a scrolling <div> that is supposed to fill the visible area of the page:
<div id=allcontent style="width:100%;height:100%;overflow:scroll">
(all page content)
</div>
When I zoom in with ctrl+ IE11, there is extra space below and to the right of my div, where I see the <body> background color.
I would like to resize the "allcontent" div to fill the page when IE zooms in, but I can't find a way to get the actual page size using javascript.
Is there either:
a way to get the real page size from IE11 after clicking ctrl+, or
a way to specify the <div> dimensions in CSS that will cause it to resize correctly with the page?
I have tried all sorts of measurements like ocument.body.clientWidth but not found anything that applies to the newly visible area outside of my <div>.
Even weirder: the page slowly scrolls to cover up the (wrongly) exposed body color.
The problem was the "auto zoom to viewport width" feature of IE11. The fix was to add the following to my CSS:
#media screen {
#-ms-viewport {
width: device-width;
}
}
Microsoft: Internet Explorer... automatically scales content when the window is narrower than 1024 pixels... in cases where this automatic scaling is not needed or desired, the device-width keyword... signifies that the page is optimized to work well regardless of the width of the device.
I found the answer in this question.
I'm developing a website for smartphone and I'm having some issues with the top safari bar. I would like to always display it in portrait and landscape.
On a page, I do have a link animation. When I'm clicking on it, the browser is removing the top bar. Is there a way to let the top bar during the animation?
Thanks
Safari automatically slides the browser top bar up on iPhones and iPod touches asoon as the page is scrolled, even by a single pixel.
The only way to get around this would to have a div that fills the screen with css property overflow:hidden but you would have to control movement of the content.