質問編集履歴
6
情報を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -43,19 +43,19 @@
|
|
|
43
43
|
**-画像⑤-**
|
|
44
44
|
|
|
45
45
|
|
|
46
|
-
・エンジニアの方のブログで似た
|
|
46
|
+
・エンジニアの方のブログで似た事例を見つけました。
|
|
47
47
|
[https://naoyu.net/window-load-innerwidth/](https://naoyu.net/window-load-innerwidth/)
|
|
48
|
-
`innerWidth`ではなく`load`イベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い
|
|
48
|
+
`innerWidth`ではなく`load`イベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い下記の`innerHeight`を取得するコードのタイミングを逆に`load`にしたり、`DomContentLoaded`にしてみたりしましたが変わりませんでした。
|
|
49
49
|
|
|
50
|
-
個人的には`innerWidth`でバグが有ったのなら`innerHeight`でもあってもオカシクないと思ってしまうのですが、
|
|
50
|
+
個人的には`innerWidth`でバグが有ったのなら`innerHeight`でもあってもオカシクないと思ってしまうのですが、ご存じの方はいらっしゃるでしょうか？
|
|
51
51
|
自分でググった限りではiOSのChromeでの`innerHeight`のバグの情報は出てきませんでした。
|
|
52
52
|
|
|
53
|
-
|
|
54
53
|
###該当部分のコード
|
|
55
|
-
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。
|
|
54
|
+
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では正確な該当部分が絞り込めませんでした。
|
|
55
|
+
ただ`innerHeight`を取得するコードの部分が怪しいのでその部分のコードを始めに載せさせていただきます。
|
|
56
|
-
|
|
56
|
+
他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。
|
|
57
57
|
|
|
58
|
-
scssで`include`している`center-styling`は`flexbox`を使って上下左右の中央に配置するコードです。
|
|
58
|
+
※scssで`include`している`center-styling`は`flexbox`を使って上下左右の中央に配置するコードです。
|
|
59
59
|
```html
|
|
60
60
|
<template>
|
|
61
61
|
<div id="app">
|
5
情報を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,18 +16,12 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、~~何故かプロパティが効いていません。~~
|
|
19
|
+
ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、~~何故かプロパティが効いていません。~~（下記の「追記」を御覧ください）
|
|
20
20
|
|
|
21
21
|
**-画像③-**
|
|
22
22
|
|
|
23
|
-
**追記：**
|
|
24
|
-
以下の**追記画像①**はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応`position: fixed`自体は効いているようでした。
|
|
25
|
-
bodyが不自然に伸びてしまっているのでしょうか？
|
|
26
23
|
|
|
27
|
-
**-追記画像①-**
|
|
28
|
-
|
|
29
24
|
|
|
30
|
-
|
|
31
25
|
そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
|
|
32
26
|
|
|
33
27
|
纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
|
|
@@ -42,9 +36,21 @@
|
|
|
42
36
|
iPhone6, 6plus, 8 / Chrome, Safari, Yahoo
|
|
43
37
|
Xperia xz1 / Chrome
|
|
44
38
|
|
|
45
|
-
###
|
|
39
|
+
###※追記
|
|
46
|
-
下
|
|
40
|
+
・以下の**画像⑤**はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応`position: fixed`自体は効いているようでした。
|
|
41
|
+
bodyが不自然に伸びてしまっているのでしょうか？
|
|
47
42
|
|
|
43
|
+
**-画像⑤-**
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
・エンジニアの方のブログで似たような事例を見つけました。
|
|
47
|
+
[https://naoyu.net/window-load-innerwidth/](https://naoyu.net/window-load-innerwidth/)
|
|
48
|
+
`innerWidth`ではなく`load`イベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い、下記の`innerHeight`を取得するコードのタイミングをDomContentLoaded`にしてみたりしましたが変わりませんでした。
|
|
49
|
+
|
|
50
|
+
個人的には`innerWidth`でバグが有ったのなら`innerHeight`でもあってもオカシクないと思ってしまうのですが、実際どうなのでしょうか？
|
|
51
|
+
自分でググった限りではiOSのChromeでの`innerHeight`のバグの情報は出てきませんでした。
|
|
52
|
+
|
|
53
|
+
|
|
48
54
|
###該当部分のコード
|
|
49
55
|
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。
|
|
50
56
|
一応全体の親要素であるApp.vueのコードを貼らせていただきますが、他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。
|
4
試したことを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,21 +9,30 @@
|
|
|
9
9
|
**-画像①-**
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
|
|
12
13
|
そのためこの**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
|
|
13
14
|
|
|
14
15
|
**-画像②-**
|
|
15
16
|
|
|
16
17
|
|
|
17
|
-
ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。
|
|
18
18
|
|
|
19
|
+
ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、~~何故かプロパティが効いていません。~~
|
|
20
|
+
|
|
19
21
|
**-画像③-**
|
|
20
22
|
|
|
23
|
+
**追記：**
|
|
24
|
+
以下の**追記画像①**はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応`position: fixed`自体は効いているようでした。
|
|
25
|
+
bodyが不自然に伸びてしまっているのでしょうか？
|
|
21
26
|
|
|
27
|
+
**-追記画像①-**
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
22
31
|
そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
|
|
23
32
|
|
|
24
33
|
纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
|
|
25
34
|
|
|
26
|
-
最後に以下の**画像④**はSafariで
|
|
35
|
+
最後に以下の**画像④**は表示問題のないSafariでスワイプしながら撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
|
|
27
36
|
|
|
28
37
|
**-画像④-**
|
|
29
38
|
|
|
@@ -33,11 +42,14 @@
|
|
|
33
42
|
iPhone6, 6plus, 8 / Chrome, Safari, Yahoo
|
|
34
43
|
Xperia xz1 / Chrome
|
|
35
44
|
|
|
45
|
+
###試したこと
|
|
46
|
+
下記のコードでブラウザの`inneeHeight`を取得しているコードが原因かと思い、タイミングを`load`や`DomContentLoaded`にしてみたりしましたが変わりませんでした。
|
|
47
|
+
|
|
36
48
|
###該当部分のコード
|
|
37
49
|
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。
|
|
38
50
|
一応全体の親要素であるApp.vueのコードを貼らせていただきますが、他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。
|
|
39
51
|
|
|
40
|
-
scssで`include`している`center-styling`は`
|
|
52
|
+
scssで`include`している`center-styling`は`flexbox`を使って上下左右の中央に配置するコードです。
|
|
41
53
|
```html
|
|
42
54
|
<template>
|
|
43
55
|
<div id="app">
|
3
説明不足だった箇所を訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
|
|
25
25
|
|
|
26
|
-
最後に以下の**画像④**はSafariで
|
|
26
|
+
最後に以下の**画像④**はSafariで下方向にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
|
|
27
27
|
|
|
28
28
|
**-画像④-**
|
|
29
29
|
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。
|
|
38
38
|
一応全体の親要素であるApp.vueのコードを貼らせていただきますが、他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。
|
|
39
39
|
|
|
40
|
+
scssで`include`している`center-styling`は`flex-box`を使って上下左右の中央に配置するコードです。
|
|
40
41
|
```html
|
|
41
42
|
<template>
|
|
42
43
|
<div id="app">
|
|
@@ -102,6 +103,7 @@
|
|
|
102
103
|
```
|
|
103
104
|
```css
|
|
104
105
|
@import '@/assets/styles/_fragments.scss';
|
|
106
|
+
|
|
105
107
|
html {
|
|
106
108
|
font-size: calc(62.5% + 0.5vw);
|
|
107
109
|
}
|
2
誤字を修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,21 +5,26 @@
|
|
|
5
5
|
|
|
6
6
|
###発生している問題・エラーメッセージ
|
|
7
7
|
今現在iPhoneのChromeのモバイルブラウザでのみ以下の**画像①**のように何故かサイトの下部に謎の余白ができてしまっています。
|
|
8
|
+
|
|
9
|
+
**-画像①-**
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
そのためこの**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
|
|
13
|
+
|
|
11
14
|
**-画像②-**
|
|
12
15
|
|
|
13
16
|
|
|
14
17
|
ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。
|
|
18
|
+
|
|
15
19
|
**-画像③-**
|
|
16
20
|
|
|
17
21
|
|
|
18
22
|
そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
|
|
19
23
|
|
|
20
|
-
|
|
24
|
+
纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
|
|
21
25
|
|
|
22
26
|
最後に以下の**画像④**はSafariで上にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
|
|
27
|
+
|
|
23
28
|
**-画像④-**
|
|
24
29
|
|
|
25
30
|
|
1
構成を読みやすく変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,34 +4,30 @@
|
|
|
4
4
|
皆様、よろしければお力添えをお願いいたします。
|
|
5
5
|
|
|
6
6
|
###発生している問題・エラーメッセージ
|
|
7
|
+
今現在iPhoneのChromeのモバイルブラウザでのみ以下の**画像①**のように何故かサイトの下部に謎の余白ができてしまっています。
|
|
7
|
-
|
|
8
|
+
|
|
8
9
|
|
|
9
|
-
今現在iPhoneのChromeのモバイルブラウザでのみ**画像①**のように何故かサイトの下部に謎の余白ができてしまっています。
|
|
10
|
-
そのため**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
|
|
10
|
+
そのためこの**画像②**のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。
|
|
11
|
-
|
|
11
|
+
**-画像②-**
|
|
12
|
-
|
|
12
|
+
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
ここで奇妙なのが、この**画像③**のように`position: fixed`が指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。
|
|
15
|
+
**-画像③-**
|
|
16
|
+
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。
|
|
17
19
|
|
|
20
|
+
一旦纏めると、「サイトの下部に謎の余白ができる・メニューの`position: fixed`が効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。
|
|
21
|
+
|
|
22
|
+
最後に以下の**画像④**はSafariで上にスワイプした状態で撮ったスクリーンショットなのですが、メニューにきちんと`position: fixed`が効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。
|
|
23
|
+
**-画像④-**
|
|
24
|
+
|
|
25
|
+
|
|
18
26
|
**※確認した環境：**
|
|
19
27
|
windows10 pro 64bit / Chrome, Firefox, edge
|
|
20
28
|
iPhone6, 6plus, 8 / Chrome, Safari, Yahoo
|
|
21
29
|
Xperia xz1 / Chrome
|
|
22
30
|
|
|
23
|
-
###スクリーンショット
|
|
24
|
-
**-画像①-**
|
|
25
|
-
|
|
26
|
-
**-画像②-**
|
|
27
|
-
|
|
28
|
-
**-画像③-**
|
|
29
|
-
|
|
30
|
-
**-画像④-**
|
|
31
|
-
|
|
32
|
-
**-画像⑤-**
|
|
33
|
-
|
|
34
|
-
|
|
35
31
|
###該当部分のコード
|
|
36
32
|
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では該当部分が絞り込めませんでした。
|
|
37
33
|
一応全体の親要素であるApp.vueのコードを貼らせていただきますが、他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。
|