質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2936閲覧

Chromeのモバイルブラウザでのみ謎の空白が発生し、一部cssが無効になる

take-t.t.

総合スコア360

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2グッド

1クリップ

投稿2020/01/03 09:49

編集2020/01/05 19:12

###前提・実現したいこと
いつもお世話になっております。
現在原因不明のレイアウトのバグ(?)が起きており、自分では解決できずに立ち往生してしまっています。
皆様、よろしければお力添えをお願いいたします。

###発生している問題・エラーメッセージ
今現在iPhoneのChromeのモバイルブラウザでのみ以下の画像①のように何故かサイトの下部に謎の余白ができてしまっています。

-画像①-
画像①

そのためこの画像②のように、sweetalertも空白分を基準とした中央に配置されてしまっている状態です。

-画像②-
画像②

ここで奇妙なのが、この画像③のようにposition: fixedが指定してあるハンバーガーメニューも何故か一緒にスクロールしてしまっていることです、何故かプロパティが効いていません。(下記の「追記」を御覧ください)

-画像③-
画像③

そして期待した通りに表示される場合もあります、ただその時は何故かcssアニメーションが効かなくなっています。

纏めると、「サイトの下部に謎の余白ができる・メニューのposition: fixedが効かなくなる」と「cssアニメーションが効かなくなる」のどちらかがランダムに発生している状態です。

最後に以下の画像④は表示問題のないSafariでスワイプしながら撮ったスクリーンショットなのですが、メニューにきちんとposition: fixedが効いており、そもそもプロパティが指定できていないという話ではないとご理解頂けると思います。

-画像④-
画像④

※確認した環境:
windows10 pro 64bit / Chrome, Firefox, edge
iPhone6, 6plus, 8 / Chrome, Safari, Yahoo
Xperia xz1 / Chrome

###※追記
・以下の画像⑤はスワイプしながら撮ったスクリーンショットなのですが、基準の位置はオカシイですが一応position: fixed自体は効いているようでした。
bodyが不自然に伸びてしまっているのでしょうか?

-画像⑤-
画像⑤

・エンジニアの方のブログで似た事例を見つけました。
https://naoyu.net/window-load-innerwidth/
innerWidthではなくloadイベントで読んでいるわけでも無いので厳密には違うのですが、似たような箇所が原因かと思い下記のinnerHeightを取得するコードのタイミングを逆にloadにしたり、DomContentLoadedにしてみたりしましたが変わりませんでした。

個人的にはinnerWidthでバグが有ったのならinnerHeightでもあってもオカシクないと思ってしまうのですが、ご存じの方はいらっしゃるでしょうか?
自分でググった限りではiOSのChromeでのinnerHeightのバグの情報は出てきませんでした。

###該当部分のコード
特にエラー等もなく、色々とググっては見たのですが似たような症状もヒットせず、私の知識では正確な該当部分が絞り込めませんでした。
ただinnerHeightを取得するコードの部分が怪しいのでその部分のコードを始めに載せさせていただきます。
他は何かご指摘いただいた時に、随時その部分のコードを追加するという形にさせて下さい。

※scssでincludeしているcenter-stylingflexboxを使って上下左右の中央に配置するコードです。

html

1<template> 2 <div id="app"> 3 <header-component /> 4 <div class="wrapper" :class="{ 'wrapper--opened': active }"> 5 <main> 6 <transition name="switch" mode="out-in"> 7 <router-view /> 8 </transition> 9 </main> 10 <footer-component /> 11 </div> 12 <div class="loading" v-if="loading"> 13 <img :src="require('@/assets/images/authentication-loading.svg')"> 14 </div> 15 </div> 16</template>

JavaScript

1import HeaderComponent from '@/components/Header.vue'; 2import FooterComponent from '@/components/Footer.vue'; 3import { mapState, mapActions } from 'vuex'; 4import firebase from 'firebase'; 5 6export default { 7 created() { 8 firebase.auth().onAuthStateChanged(user => { 9 if(user) { 10 this.setLoginUser(user); 11 this.fetchBooks(); 12 this.$swal({ 13 toast: true, 14 position: 'top-end', 15 type: 'success', 16 title: 'ログインしました', 17 showConfirmButton: false, 18 timer: 1500 19 }).then(result => { 20 if(result) this.offLoading(); 21 }); 22 } 23 }); 24 }, 25 mounted() { 26 let vh = window.innerHeight * 0.01; 27 document.documentElement.style.setProperty('--vh', `${vh}px`); 28 window.addEventListener('resize', () => { 29 let reVh = window.innerHeight * 0.01; 30 document.documentElement.style.setProperty('--vh', `${reVh}px`); 31 }); 32 }, 33 computed: { 34 ...mapState(['loading', 'active']), 35 }, 36 methods: { 37 ...mapActions(['setLoginUser', 'offLoading', 'fetchBooks']) 38 }, 39 components: { 40 HeaderComponent, 41 FooterComponent 42 } 43};

css

1@import '@/assets/styles/_fragments.scss'; 2 3html { 4 font-size: calc(62.5% + 0.5vw); 5} 6body { 7 font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; 8 color: $base-black; 9 -webkit-font-smoothing: antialiased; 10 -moz-osx-font-smoothing: grayscale; 11} 12a { 13 color: $base-black; 14 text-decoration: none; 15} 16 17#app { 18 text-align: center; 19 overflow: hidden; 20 min-height: calc(var(--vh, 1vh) * 100); 21 .wrapper { 22 background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('~@/assets/images/main-background.jpg'); 23 background-size: cover; 24 transition: 0.5s; 25 &--opened { 26 transform: translateX(15rem); 27 } 28 main { 29 @include center-styling; 30 min-height: calc(var(--vh, 1vh) * 100 - 2.5rem); 31 box-sizing: border-box; 32 padding: 1rem 0; 33 } 34 } //.wrapper 35 .loading { 36 @include center-styling; 37 position: absolute; 38 top: 0; 39 left: 0; 40 right: 0; 41 bottom: 0; 42 z-index: 101; 43 background-color: rgba(0, 0, 0, 0.2); 44 user-select: none; 45 } 46} //#app 47 48//ページ遷移トランジション 49.switch-enter-active { 50 transition: 1s; 51} 52.switch-enter, 53.switch-leave-to { 54 opacity: 0; 55}
taiyakix, takuhito_hihara👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2020/01/05 05:12

Safariでは発生しないんですよね?
take-t.t.

2020/01/05 16:00

はい、今の所iPhoneのChromeだけで発生しています。 XperiaのChromeでは大丈夫でした。
kyoya0819

2020/01/05 16:03

iPhoneの、それもChromeだけ違う挙動が起きるというのはいささか不思議でして、 iOS, iPad OSのブラウザの仕様等々はすべて共通なんです。(WebKit2) なので、仕様上の問題ならほかのアプリでも再現できるはずです。 そうなるとChrome自体のバグの可能性も考えられます。 最新バージョンでしょうか?
take-t.t.

2020/01/05 16:21 編集

全て最新版で検証しました。 あとiPadは持っていなく検証できていないので、実際はそっちでも発生しているのかもしれません。 一応PCのChromeのデベロッパーツールから確認する限りでは、すべての端末で問題なく表示できるはずなのですが... それとこれは質問文にも追記させていただこうと思っていたのですが、謎の空白が出来てしまっていた場合でも、一度ログインするなどして何かイベントが発火すると表示が元に戻る(普通のF5的な更新では戻らない)ようです。 他にもいくつか分かったことがあるので詳しくは質問文に追記します。
退会済みユーザー

退会済みユーザー

2020/01/11 11:26

PCのブラウザのエンジンで端末サイズでCSSが同表示されるかを確認されるだけであって動作を保証するものではないです。→デベロッパーツール
guest

回答2

0

自己解決

解決はしていませんが、iOS版のChromeでのみ起こることから、こいつ特有のバグかと思われるので仕様という事で質問を取り下げさていただきます。

投稿2020/02/22 17:04

take-t.t.

総合スコア360

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

innerHTMLをouterHeightにすると解消しませんか?

スマホはアドレスバーが見え隠れする関係、ビューポートの高さの値はouterHeghtで取得しないと正しい高さが得られないのでは?と思ったのですが...
参考リンク

投稿2020/01/14 08:49

makosankibu

総合スコア289

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2020/01/15 20:53 編集

所謂 html, body { 100%; } の時の要素の高さ(アドレスバー等を含まない純粋なビューポートのheight)を取得したいので、innerHeightでないとやりたいことが出来ないんです。 似た事がvhでも出来ますが、それだとアドレスバー等を含んでしまうので、innerHeightを1/100したinnerVh的なものを取得したいという感じです。
makosankibu

2020/01/16 00:38

IOS端末でのデバッグをするしかないと思います。 掲載されてるコード見た感じだと#appに指定されてるmin-heightの値(--vh)が怪しそうですが... とにかくvar(--vh)の値をデバッグで調べてみないとわからなそうですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問