I understand that mobile safari has a lot of bugs around fixed elements, but for the most part I've managed to get my layout working correctly until I added a much needed text input to the fixed navigation at the bottom. Now when the user focuses on the text input element and the virtual keyboard appears, my navigation, which is otherwise always fixed at the bottom of the page, jumps up to a really strange spot in the middle of the page.
I'd add some of my code to this post, but I wouldn't be sure where to start. That navigation is fixed at the bottom and positioned to the left and bottom 0, and 100% width. From there, I don't know what's going on, I can only assume it's a mobile safari bug.
It also appears to lose it's position fixed and become relative, only while the text input element is focused on and the virtual keyboard is open.
To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events. The trick is to put the tapped input control to the bottom of screen before it activates focus.
Go to Settings > General > Keyboard. Tap Keyboards, then do any of the following: Add a keyboard: Tap Add New Keyboard, then choose a keyboard from the list. Repeat to add more keyboards.
http://dansajin.com/2012/12/07/fix-position-fixed/ this is one of the solutions proposed. Seems worth a shot.
In short: set fixed
elements to position:absolute
when any input is focus
ed and reset them when that element is blur
red
.header { position: fixed; } .footer { position: fixed; } .fixfixed .header, .fixfixed .footer { position: absolute; }
and
if ('ontouchstart' in window) { /* cache dom references */ var $body = $('body'); /* bind events */ $(document) .on('focus', 'input', function() { $body.addClass('fixfixed'); }) .on('blur', 'input', function() { $body.removeClass('fixfixed'); }); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With