ionic3 – iframe内に表示したWebページ内で要素が変更されるとiframeの先頭に飛んでしまう（ios不具合）

もともと「ハイブリッドアプリ制作にチャレンジしてみる」という記事でionic4で進めていましたが、beta版であったのとWebでの情報が少なそうな気配を感じたので、ionic3でやる方向にチェンジしました(>_<)

っで、今回の主題ですがios特有の恐らくバグと思われる事象にかなり苦しめられたので、残しておきたいと思います。

事象詳細

自社のWebサイトが別にあったのですが、スマホアプリ内でそのサイトを一部表示したく、iframeを使って表示するように作りこみをしていました。やり方としては、DomSanitizerを使ってiframeのsrcにバインドするやり方です

細かいところ端折りますが、ざっくりこんな感じ↓

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  public html_data: SafeResourceUrl = null;

  constructor(
    public sanitize: DomSanitizer,
  ) {}

  ionViewWillEnter(){
    html_data = this.sanitize.bypassSecurityTrustResourceUrl('WebのURL');
  }
}

<ion-content padding>
  <iframe *ngIf="html_data" [src]="html_data" name="iframe"></iframe>
</ion-content>

これで普通にiframe内に外部サイトを表示することが出来ていたんですが、ふとios実機でデバッグしている際に、iframe内のjavascriptを動かした時に奇妙な動きをしました(；･`д･´)

該当のjavascriptは「表示／非表示」の切り替えボタンみたいな感じで、単純にdisplay:block;とdisplay:none;と交互に書き換えるだけのモノだったのですが、jsを動作させるとiframe内に表示されていたWebサイトがページの一番上にジャンプしてしまうという謎の挙動を示しました・・・

何言ってるかわかりにくいかもしれませんが、iframe内のWebページを下の方にスクロールさせている状態で要素が変更されるとスクロールがページの頭に戻ってしまう、みたいな感じです。

実際、jsを動作させなくともWebインスペクタの開発者ツールでhtmlのスタイルを直接変更させても同じことが起こりました(>_<)

対処策

日本語のサイトでは全く手掛かりがなさそうだったので、GitHubやstackoverflowを散々渡り歩いて色々試したところ、今回のわたしの事象を解決してくれたものに行き当たりました！

iOS iframe scroll jumping

こちらのissuesでsckttさんがコメントしてくれているところですが、以下のCSSをiframe内の外部サイト側に効かせることで改善しました(*´∀`*)

html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

今回iframe内に表示していたのは自社のWebサイトだったので、修正することができましたが、第三者の外部サイトであればなんとか頑張ってDOMを書き換えるような感じになりますかね・・・

いやー、でも解決してくれてよかった・・・2日くらい無駄にしましたよ_:(´ཀ`」 ∠):

事象詳細

対処策

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル