iPhone chromeでのヘッダーとフッターの固定表示

iPhone chromeでヘッダーとフッター要素をposition:fixedにしているのに画面スクロールを行うと
ヘッダー要素はアドレスバーに、フッター要素は下部から表示されるchromeのオブジェクトに隠れてしまいます。

PCやAndroid Chromeでは問題はなく、iPhone Safariでは問題は起きていません。

表題の件につきまして対応をご教授いただければと思い投稿いたしました。

情報に不足がありましたら、申しつけ下さい。

どうぞよろしくお願い致します。

＜ヘッダー部＞

html
1<div class="header_container-sp">
2        <div class="header_left">
3          <div class="logo_container-sp">
4            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
5            <img src="<?php echo get_theme_file_uri('/images/sp/logo-sp.png'); ?>" width="99" height="93" alt="">
6            </a>
7          </div>
8          <div class="header__upper--center-sp">
9            <h1 class="logo_container-sp">
10              <img src="<?php echo get_theme_file_uri('/images/sp/common/xxx.png'); ?>" width="484" height="79" alt="">
11            </h1>
12          </div>
13        </div>
14
15        <div class="header_right">
16          <!-- ハンバーガーボタン -->
17          <button type="button" class="drawer-toggle drawer-hamburger">
18            <span class="sr-only">toggle navigation</span>
19            <span class="drawer-hamburger-icon"></span>
20          </button>
21
22          <header role="banner">
23
24            <!-- ナビゲーションの中身 -->
25            <nav class="drawer-nav" role="navigation">
26              <ul class="drawer-menu">
27                <li class="drawer-brand"> </li>
28                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/' ) ); ?>">HOME</a></li>
29                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/aaa/' ) ); ?>">aaa</a></li>
30                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/bbb/' ) ); ?>">bbb</a></li>
31                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ccc/' ) ); ?>">ccc</a></li>
32                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ddd/' ) ); ?>">ddd</a></li>
33                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/eee/' ) ); ?>">eee</a></li>
34                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/fff/' ) ); ?>">fff</a></li>
35                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ggg/' ) ); ?>">ggg</a></li>
36              </ul>
37            </nav>
38          </header>
39
40        </div><!--header_right-->
41      </div>

＜ヘッダー部css＞
.header_container-sp {
position: relative;
position: fixed;
は、このようにしないと表示が崩れるため、あえて表記しています。

css
1 /*ヘッダーコンテンツの指定*/
2
3  header {
4    width: 0;
5    border-bottom: none;
6  }
7
8  .header_container-sp {
9    /*134px*/
10    position: relative;
11    position: fixed;
12    z-index: 9999;
13    display: flex;
14    /*display: -webkit-box;*/
15    display: -ms-flexbox;
16    /*追記分*/
17    box-sizing: border-box;
18    width: 100vw;
19    height: 17.448vw;
20    /*padding: 20px 30px 20px 30px;*/
21    padding: 2.604vw 3.906vw 2.604vw 3.906vw;
22    border-bottom: solid 2px #26b9ac;
23    background-color: #fff;
24    align-items: center;
25    -webkit-box-align: center;
26    -ms-flex-align: center;
27    -webkit-box-pack: justify;
28    -ms-flex-pack: justify;
29    justify-content: space-between;
30  }
31
32  .header_container-sp .header_left {
33    display: flex;
34    width: 100%;
35  }
36
37  .header_container-sp .logo_container-sp {
38    margin-right: 6.51vw;
39  }
40
41  .header_container-sp .logo_container-sp {
42    width: auto;
43  }
44
45  .header_container-sp .logo_container-sp img {
46    width: 100%;
47    max-width: 12.891vw;
48    /*99px*/
49    height: auto;
50  }
51
52  .header_container-sp .header__upper--center-sp {
53    display: block;
54    margin: auto;
55    text-align: center;
56  }
57
58  .header_container-sp .header__upper--center-sp .logo_container-sp {
59    margin: 0;
60  }
61
62  .header_container-sp .header__upper--center-sp img {
63    width: 100%;
64    max-width: 48.177vw;
65    /*370px*/
66    height: auto;
67  }
68
69  .drawer-toggle.drawer-hamburger:focus {
70    outline: none !important;
71  }
72
73  .drawer-hamburger {
74    width: 9.115vw;
75    margin-left: 6.51vw;
76    padding: 0;
77  }
78
79  .drawer-hamburger-icon,
80  .drawer-hamburger-icon:after,
81  .drawer-hamburger-icon:before {
82    height: 1.302vw;
83  }
84
85  .drawer-hamburger-icon:before {
86    top: -3.906vw;
87  }
88
89  .drawer-hamburger-icon:after {
90    top: 3.906vw;
91  }
92
93  .header-space {
94    margin-top: 17.578vw;
95  }
96
97  .drawer-nav {
98    background-color: #26b9ac;
99  }
100
101  .drawer-menu {
102    padding-top: 4.35vw;
103  }
104
105  .drawer-hamburger-icon {
106    margin: 0;
107  }
108
109  .drawer-overlay {
110    z-index: 99;
111  }

＜フッター部＞

html
1<div id="fixed_outer">
2<nav id="fixed_menu"><ul>
3  <li class="menu-item menu-item_tel"><a href="tel:000-000-000" class="tel"></a></li>
4  <li class="menu-item menu-item_contact"><a href="<?php echo esc_url( home_url( '/ggg/' ) ); ?>" class="ggg"></a></li>
5  </ul></nav><!-- /#header_menu -->
6</div>

＜フッター部css＞

css
1#fixed_outer {
2    position: fixed;
3    z-index: 9999;
4    top: auto;
5    right: 0;
6    bottom: 0;
7    /*padding: 0 15px;*/
8    width: 100%;
9  }
10
11  #fixed_menu ul {
12    position: relative;
13    display: flex;
14    /*display: -webkit-box;*/
15    display: -ms-flexbox;
16    flex-direction: row;
17    align-items: center;
18    -webkit-box-align: center;
19    -ms-flex-align: center;
20    -webkit-box-orient: horizontal;
21    -webkit-box-direction: normal;
22    -ms-flex-direction: row;
23  }
24
25  #fixed_outer li {
26    /*font-family: "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, sans-serif;*/
27    font-family: Helvetica Neue, Helvetica, Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ ProN W6', 'Hiragino Kaku Gothic ProN W3', 'Hiragino Kaku Gothic ProN W6', Hiragino Kaku Gothic ProN, 'メイリオ', Meiryo, sans-serif;
28    width: auto;
29    height: 12vw;
30    /*margin: 0 14px;*/
31    margin: 0 .911vw;
32    flex: 1 1 25%;
33    /*7px*/
34  }
35
36  #fixed_outer a {
37    font-size: 3.49609vw;
38    flex-wrap: wrap;
39  }
40
41  #fixed_outer a {
42    font-weight: bold;
43    z-index: 1000;
44    display: flex;
45    width: 100%;
46    height: 100%;
47    background-color: #007532;
48    justify-content: space-around;
49    align-items: center;
50  }
51
52  #fixed_outer a.tel::before {
53    width: 7vw;
54    height: 7vw;
55  }
56
57  #fixed_outer a.contact::before {
58    width: 5vw;
59    height: 5vw;
60  }
61
62  #fixed_outer a.access::before {
63    width: 5vw;
64    height: 5vw;
65  }
66
67  a::before {
68    display: block;
69    content: '';
70    background-repeat: no-repeat;
71    background-size: contain;
72  }
73
74  #fixed_outer a::after {
75    font-size: 3.49609vw;
76    color: #fff;
77  }
78
79  a.tel::after {
80    position: relative;
81    top: .651vw;
82    /*5px*/
83    left: -5.859vw;
84    display: block;
85    content: 'TEL';
86    /*-45px*/
87  }
88
89  a.contact::after {
90    position: relative;
91    top: .651vw;
92    /*5px*/
93    left: -1.953vw;
94    display: block;
95    content: 'お問合せ';
96    /*-15px*/
97  }