teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Chromeのモバイルブラウザでのみ謎の空白が発生し、一部cssが無効になる

編集履歴

質問編集履歴

6

情報を追記

2020/01/05 19:12

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -88,31 +88,31 @@
88
88
 
89
89
 
90
90
 
91
- ・エンジニアの方のブログで似たような事例を見つけました。
91
+ ・エンジニアの方のブログで似た事例を見つけました。
92
92
 
93
93
  [https://naoyu.net/window-load-innerwidth/](https://naoyu.net/window-load-innerwidth/)
94
94
 
95
- `innerWidth`ではなく`load`イベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い、下記の`innerHeight`を取得するコードのタイミングをDomContentLoaded`にしてみたりしましたが変わりませんでした。
95
+ `innerWidth`ではなく`load`イベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い下記の`innerHeight`を取得するコードのタイミングを逆に`load`にしたり、`DomContentLoaded`にしてみたりしましたが変わりませんでした。
96
-
97
-
98
-
96
+
97
+
98
+
99
- 個人的には`innerWidth`でバグが有ったのなら`innerHeight`でもあってもオカシクないと思ってしまうのですが、実際どうなのでしょうか？
99
+ 個人的には`innerWidth`でバグが有ったのなら`innerHeight`でもあってもオカシクないと思ってしまうのですが、ご存じの方はいらっしゃるでしょうか？
100
100
 
101
101
  自分でググった限りではiOSのChromeでの`innerHeight`のバグの情報は出てきませんでした。
102
102
 
103
103
 
104
104
 
105
-
106
-
107
105
  ###該当部分のコード
108
106
 
109
- 特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。
107
+ 特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では正確な該当部分が絞り込めませんでした。
108
+
110
-
109
+ ただ`innerHeight`を取得するコードの部分が怪しいのでその部分のコードを始めに載せさせていただきます。
110
+
111
- 一応全体の親要素であるApp.vueのコードを貼らせていただきますが、他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。
111
+ 他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。
112
-
113
-
114
-
112
+
113
+
114
+
115
- scssで`include`している`center-styling`は`flexbox`を使って上下左右の中央に配置するコードです。
115
+ ※scssで`include`している`center-styling`は`flexbox`を使って上下左右の中央に配置するコードです。
116
116
 
117
117
  ```html
118
118
 

5

情報を追記

2020/01/05 19:12

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、~~何故かプロパティが効いていません。~~
37
+ ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、~~何故かプロパティが効いていません。~~（下記の「追記」を御覧ください）
38
38
 
39
39
 
40
40
 
@@ -42,53 +42,65 @@
42
42
 
43
43
  ![画像③](35c86b235e0d38640795c95a81628962.png)
44
44
 
45
+
46
+
47
+
48
+
49
+ そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
50
+
51
+
52
+
53
+ 纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
54
+
55
+
56
+
57
+ 最後に以下の**画像④**は表示問題のないSafariでスワイプしながら撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
58
+
59
+
60
+
45
- **追記：**
61
+ **-画像④-**
62
+
46
-
63
+ ![画像④](c140def8f1c54f35973942bb280f0cc5.png)
64
+
65
+
66
+
67
+ **※確認した環境：**
68
+
69
+ windows10 pro 64bit / Chrome, Firefox, edge
70
+
71
+ iPhone6, 6plus, 8 / Chrome, Safari, Yahoo
72
+
73
+ Xperia xz1 / Chrome
74
+
75
+
76
+
77
+ ###※追記
78
+
47
- 以下の**追記画像①**はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応`position: fixed`自体は効いているようでした。
79
+ ・以下の**画像⑤**はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応`position: fixed`自体は効いているようでした。
48
80
 
49
81
  bodyが不自然に伸びてしまっているのでしょうか？
50
82
 
51
83
 
52
84
 
53
- **-追記画像①-**
85
+ **-画像⑤-**
54
-
86
+
55
- ![追記画像①](45606f939a8fca18707765057b08724c.png)
87
+ ![画像⑤](45606f939a8fca18707765057b08724c.png)
56
-
57
-
58
-
59
-
60
-
88
+
89
+
90
+
61
- そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
91
+ ・エンジニアの方のブログで似たような事例を見つけました。
62
-
63
-
64
-
65
- 纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
92
+
66
-
67
-
68
-
69
- 最後に以下の**画像④**は表示問題のないSafariでスワイプしながら撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
93
+ [https://naoyu.net/window-load-innerwidth/](https://naoyu.net/window-load-innerwidth/)
70
-
71
-
72
-
73
- **-画像④-**
94
+
74
-
75
- ![画像④](c140def8f1c54f35973942bb280f0cc5.png)
76
-
77
-
78
-
79
- **※確認した環境：**
80
-
81
- windows10 pro 64bit / Chrome, Firefox, edge
82
-
83
- iPhone6, 6plus, 8 / Chrome, Safari, Yahoo
84
-
85
- Xperia xz1 / Chrome
86
-
87
-
88
-
89
- ###試したこと
90
-
91
- 下記のコードでブラウザの`inneeHeight`を取得しているコードが原因かと思い、タイミングを`load`や`DomContentLoaded`にしてみたりしましたが変わりませんでした。
95
+ `innerWidth`ではなく`load`イベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い、下記の`innerHeight`を取得するコードのタイミングをDomContentLoaded`にしてみたりしましたが変わりませんでした。
96
+
97
+
98
+
99
+ 個人的には`innerWidth`でバグが有ったのなら`innerHeight`でもあってもオカシクないと思ってしまうのですが、実際どうなのでしょうか？
100
+
101
+ 自分でググった限りではiOSのChromeでの`innerHeight`のバグの情報は出てきませんでした。
102
+
103
+
92
104
 
93
105
 
94
106
 

4

試したことを追記

2020/01/05 17:43

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,8 @@
20
20
 
21
21
 
22
22
 
23
+
24
+
23
25
  そのためこの**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
24
26
 
25
27
 
@@ -30,7 +32,9 @@
30
32
 
31
33
 
32
34
 
35
+
36
+
33
- ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。
37
+ ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、~~何故かプロパティが効いていません。~~
34
38
 
35
39
 
36
40
 
@@ -38,6 +42,20 @@
38
42
 
39
43
  ![画像③](35c86b235e0d38640795c95a81628962.png)
40
44
 
45
+ **追記：**
46
+
47
+ 以下の**追記画像①**はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応`position: fixed`自体は効いているようでした。
48
+
49
+ bodyが不自然に伸びてしまっているのでしょうか？
50
+
51
+
52
+
53
+ **-追記画像①-**
54
+
55
+ ![追記画像①](45606f939a8fca18707765057b08724c.png)
56
+
57
+
58
+
41
59
 
42
60
 
43
61
  そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
@@ -48,7 +66,7 @@
48
66
 
49
67
 
50
68
 
51
- 最後に以下の**画像④**はSafariで下方向にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
69
+ 最後に以下の**画像④**は表示問題のないSafariでスワイプしながら撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
52
70
 
53
71
 
54
72
 
@@ -68,6 +86,12 @@
68
86
 
69
87
 
70
88
 
89
+ ###試したこと
90
+
91
+ 下記のコードでブラウザの`inneeHeight`を取得しているコードが原因かと思い、タイミングを`load`や`DomContentLoaded`にしてみたりしましたが変わりませんでした。
92
+
93
+
94
+
71
95
  ###該当部分のコード
72
96
 
73
97
  特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。
@@ -76,7 +100,7 @@
76
100
 
77
101
 
78
102
 
79
- scssで`include`している`center-styling`は`flex-box`を使って上下左右の中央に配置するコードです。
103
+ scssで`include`している`center-styling`は`flexbox`を使って上下左右の中央に配置するコードです。
80
104
 
81
105
  ```html
82
106
 

3

説明不足だった箇所を訂正

2020/01/05 17:15

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
 
50
50
 
51
- 最後に以下の**画像④**はSafariで上にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
51
+ 最後に以下の**画像④**はSafariで下方向にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
52
52
 
53
53
 
54
54
 
@@ -76,6 +76,8 @@
76
76
 
77
77
 
78
78
 
79
+ scssで`include`している`center-styling`は`flex-box`を使って上下左右の中央に配置するコードです。
80
+
79
81
  ```html
80
82
 
81
83
  <template>
@@ -206,6 +208,8 @@
206
208
 
207
209
  @import '@/assets/styles/_fragments.scss';
208
210
 
211
+
212
+
209
213
  html {
210
214
 
211
215
  font-size: calc(62.5% + 0.5vw);

2

誤字を修正

2020/01/03 15:17

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -12,12 +12,18 @@
12
12
 
13
13
  今現在iPhoneのChromeのモバイルブラウザでのみ以下の**画像①**のように何故かサイトの下部に謎の余白ができてしまっています。
14
14
 
15
+
16
+
17
+ **-画像①-**
18
+
15
19
  ![画像①](c8b5a6ef4e5cbf8f127320ba0e6b3d97.png)
16
20
 
17
21
 
18
22
 
19
23
  そのためこの**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
20
24
 
25
+
26
+
21
27
  **-画像②-**
22
28
 
23
29
  ![画像②](f44f7d40bdef97b89233804ab44e4178.png)
@@ -26,6 +32,8 @@
26
32
 
27
33
  ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。
28
34
 
35
+
36
+
29
37
  **-画像③-**
30
38
 
31
39
  ![画像③](35c86b235e0d38640795c95a81628962.png)
@@ -36,12 +44,14 @@
36
44
 
37
45
 
38
46
 
39
- 一旦纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
47
+ 纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
40
48
 
41
49
 
42
50
 
43
51
  最後に以下の**画像④**はSafariで上にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
44
52
 
53
+
54
+
45
55
  **-画像④-**
46
56
 
47
57
  ![画像④](c140def8f1c54f35973942bb280f0cc5.png)

1

構成を読みやすく変更

2020/01/03 10:27

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -10,25 +10,41 @@
10
10
 
11
11
  ###発生している問題・エラーメッセージ
12
12
 
13
- 以下のスクリーンショットの画像をご参照下さい。
14
-
15
-
16
-
17
- 今現在iPhoneのChromeのモバイルブラウザでのみ**画像①**のように何故かサイトの下部に謎の余白ができてしまっています。
13
+ 今現在iPhoneのChromeのモバイルブラウザでのみ以下の**画像①**のように何故かサイトの下部に謎の余白ができてしまっています。
14
+
18
-
15
+ ![画像①](c8b5a6ef4e5cbf8f127320ba0e6b3d97.png)
16
+
17
+
18
+
19
- そのため**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
19
+ そのためこの**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
20
+
20
-
21
+ **-画像②-**
22
+
23
+ ![画像②](f44f7d40bdef97b89233804ab44e4178.png)
24
+
25
+
26
+
21
- ここで奇妙なのが、**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。
27
+ ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。
28
+
22
-
29
+ **-画像③-**
30
+
31
+ ![画像③](35c86b235e0d38640795c95a81628962.png)
32
+
33
+
34
+
23
- そして**画像④**のように表示が普通の場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
35
+ そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
24
-
25
-
26
-
36
+
37
+
38
+
27
- 一旦纏めると、「サイトの下部に謎の余白ができる / メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
39
+ 一旦纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
28
-
29
-
30
-
40
+
41
+
42
+
31
- 最後に**画像⑤**はSafariで上にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
43
+ 最後に以下の**画像④**はSafariで上にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
44
+
45
+ **-画像④-**
46
+
47
+ ![画像④](c140def8f1c54f35973942bb280f0cc5.png)
32
48
 
33
49
 
34
50
 
@@ -42,30 +58,6 @@
42
58
 
43
59
 
44
60
 
45
- ###スクリーンショット
46
-
47
- **-画像①-**
48
-
49
- ![画像①](c8b5a6ef4e5cbf8f127320ba0e6b3d97.png)
50
-
51
- **-画像②-**
52
-
53
- ![画像②](f44f7d40bdef97b89233804ab44e4178.png)
54
-
55
- **-画像③-**
56
-
57
- ![画像③](35c86b235e0d38640795c95a81628962.png)
58
-
59
- **-画像④-**
60
-
61
- ![画像⑤](3572976ee385d465e3b967208bb398ab.png)
62
-
63
- **-画像⑤-**
64
-
65
- ![画像⑤](c140def8f1c54f35973942bb280f0cc5.png)
66
-
67
-
68
-
69
61
  ###該当部分のコード
70
62
 
71
63
  特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。