[ 解決済 ] ＱRコードリーダーアプリでの表示

[一聖山城]

■ WordPress のバージョン
5.8.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.11.4

■ Pro Unit のバージョン
0.12.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
正常な表示

■ 自分で試した事
ブロックのアニメーションを外してもダメでした。
すべてのブロックを削除し、順番に並べてみたところ、２つ目から表示がおかしくなりました。
ライトニングのデフォルトのパターンで試しても同じでした。
見出しと文字のみのサイトにした場合は、この症状は起こりませんでした。

■ 症状が発生するブラウザ
アンドロイドアプリ「QRコードリーダーとバーコードスキャナ（QR　Easy）

■ 実際の症状
アンドロイドアプリ「QRコードリーダーとバーコードスキャナ（QR　Easy）」でサイトにアクセスした際、上部の表示がおかしくなります。

具体的にはロゴが表示されず、上部全体が白くなります。
下にスクロールしていくと、ページの下の方が表示されます。
上から白い幕を下ろしたような感じです。
白い画面の中、ハンバーガーメニューは表示されています。

パソコンやアンドロイドのクロームブラウザでは正常に表示されます。
上記アプリはアンドロイドで使用している人が多いため、正常に表示したいと思っています。

過去にライトニングプロで作ったサイトも試してみたら、同様の症状がありました。

[石川＠Vektor,Inc.]

下記デモサイトだと正常に表示されると思いますが如何でしょうか？

HOME

上記が正常なので、おそらく中のブロックに何かしら不具合を引き起こす要因があるのではないかと思います。

一旦ブロックをすべて削除して、まずスライドだけの状態で正常に表示されますか？

あとはアニメーションブロックを使っていると該当アプリで影響が出るのかもしれません。

[一聖山城]

回答ありがとうございます。

ご提示いただいたG3proのデモサイトは通常に表示されます。
ただG3無料版のデモサイト「https://demo.dev3.biz/lightning-g3/」では同じように上部が白くなります。
他のデモサイトでも同様の症状が出ているようです。

・ブロックをすべて消してスライドだけにすれば正常に表示されます。ブロックを２つほど置くとこの症状が出ます。

・アニメーションを切った状態も試しましたが、同様でした。

よろしくお願いします。

[石川＠Vektor,Inc.]

アプリ内でのブラウザ処理の問題だと思うのですが、
おそらく下記を 追加CSS などに記載いただけば概ね解消します。

.vk-mobile-nav-menu-btn,
.site-header,
.ltg-slide,
.site-body{
	z-index:10000;
	background-color:#fff;
}
@media (min-width: 992px){
	.header_scrolled .site-header {
		z-index:100000;
	}
}

ただ、メニューボタンが固定されないなど厳密には正常に動作していない部分もありますが、
対応ブラウザ外ですので、ご容赦いただきたく思います。

• この返信は2年、 11ヶ月前に石川＠Vektor,Inc.が編集しました。

[一聖山城]

CSSを追加しましたところ、白い個所がなくなりました。
メニューは表示されませんが、なんとかなりそうです。

ライトニングで制作されたさまざまなサイトを同アプリを使って見てみましたが、ほとんどで同じ症状があることがわかりました。
G３プロのデモサイトは正常に表示されることから、回避することが可能な症状と思いますので、何かわかりました対策法をご提示いただきたいです。
同アプリは、ダウンロード数1000万以上と使用者が多いため、今後クライアントからの問い合わせもくる可能性がありますので、よろしくお願いします。

[Vektor,Inc]

原因がわかりましたら修正の対応をさせていただきます。
今後ともよろしくおねがいいたします。

　lightning/issue

[投稿者]

投稿