Kselax.ru

Hacker Kselax – the best hacker in the world

Menu
  • Blog
  • Contacts
  • wp plugin generator
  • English
    • Русский
Menu

IOS position fixed doesn’t work

Posted on 14 June, 201914 June, 2019 by admin

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

show »

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

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • bash (1)
  • English (9)
  • JavaScript (4)
  • node.js (22)
  • photoshop (1)
  • php (3)
  • React (9)
  • sclerotic (6)
  • Ubuntu (10)
  • Uncategorized (13)
  • Wordpress (1)

Tags

Ajax apache2 automation bash chrome-extension command line editor ejs email English English-grammar framework functions git graphql handlebars hybrid app installation javascript js linux newbie node.js node.js javascript nodemailer npm objects Performance php phpmyadmin playonlinux promise rabbitmq React react-router redis reverse-proxy session shell socket.io sublime text 3 time zones ubuntu unity webpack

Recent Comments

  • damien on How to install npm and nodejs the latest versions on ubuntu
  • Cam on How to install npm and nodejs the latest versions on ubuntu
  • Pierre on socket.io with apache as a reverse proxy on the CentOS
  • admin on How to use react-router with a few languages
  • admin on How to install npm and nodejs the latest versions on ubuntu
©2021 Kselax.ru Theme by ThemeGiant