On the IOS devices position fixed doesn’t work. I had a task where needs to add the button above the appeared keyboard. The button stuck to the bottom, so I did such a code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<script> console.log('1hello world'); window.addEventListener('resize', () => { console.log('window') }) let flag = null var userAgent = navigator.userAgent || navigator.vendor || window.opera; const f = () => { console.log('userAgent = ', userAgent); if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream && window.innerWidth < 800 && !flag) { console.log('once'); flag = true document.getElementById('ServiceFilter_1163_MIN').addEventListener('focus', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1164_MIN').addEventListener('focus', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1163_MAX').addEventListener('focus', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1164_MAX').addEventListener('focus', () => {console.log('focus2') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1163_MAX').addEventListener('blur', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) document.getElementById('ServiceFilter_1164_MAX').addEventListener('blur', () => {console.log('focus2') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) document.getElementById('ServiceFilter_1163_MIN').addEventListener('blur', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) document.getElementById('ServiceFilter_1164_MIN').addEventListener('blur', () => {console.log('focus2') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) } } setTimeout(() => { console.log('here we are'); f() },0) window.addEventListener("resize", function () { // console.log(window.innerWidth); // console.log('flag = ', flag); console.log('userAgent = ', userAgent); // iOS detection from: http://stackoverflow.com/a/9039885/177"20 f() }); </script> |
And after clicking on the input field the button was jumping in any places. It wasn’t fixed. Do not use position fixed with IOS it wont’ work.
Here is an example almost what I got https://www.youtube.com/watch?v=lrnvZDwgJRc
the end