0

私は Android ブラウザーで最も奇妙なレンダリングの問題の 1 つを抱えています( Galaxy Tab 10.1 と S3 はこれまで.. iPhone や他のモバイル ブラウザーではテストしていません)。

固定位置レスポンシブ Youtube ビデオを Web ページに動的に埋め込んでいます。Javascript でボタンをクリックすると、黒い背景 (位置も固定) と ID 付きの Youtube 埋め込みが作成されるので、さまざまな画面サイズでプロパティを制御できます。ここまでは順調ですね。これで滞りなく切れます。Chrome、Firefox、さらには IE でチェックアウトしましたが、がっかりすることはありません。まだ。

Android フォン (Galaxy S3 - ストック ブラウザー) で確認したところ、ビデオがレンダリングされる場所を理解するのに苦労しているようです。その場に落ち着く前に、少なくとも3回の再配置に気付きました. 幸運なことに、要素の一部が画面上に表示されることがあります。他のほとんどの場合、それほど幸運ではありません。コードは変更されておらず、ブラウザーのサイズもまったく変更されていません。レンダリングだけがあります。

さらに悪いことに、要素は実際には正しい場所に配置されているように見えますが、正しくレンダリングされていません。中央 (またはその近く) をクリックすると、ビデオが再生されます。レンダリングは、常に再レンダリングしながら再生していることを示していますが、どこにあるのかまだ不明です。

私はこの問題が非常にクレイジーに聞こえることを知っており、(デバッグは言うまでもなく) 診断することさえ難しい問題である可能性があるため、操作全体に関連するコードをできるだけ多く含めています。助けていただければ幸いです。

ビデオの作成と埋め込み

donModal.addEventListener("click", function(e) {

        e.preventDefault();

        var donPreview = document.createElement("iframe");
        donPreview.src = "http://www.youtube.com/embed/oeZgLFsglcc";
        donPreview.frameborder = "0";
        donPreview.allowfullscreen = "allowfullscreen";
        donPreview.id = "donModalVideo";

        document.body.appendChild(donPreview);

        sfx.toggleBackdrop(donPreview);         
    });
}

ビデオ スタイル

#donModalVideo {
  position: fixed;
  width: 40%;
  height: 50%;
  top: 25%;
  left: 30%;
  z-index: 95;
}

テスト用 URL

今はいじることができません..これが大丈夫だといいのですが...

http://openheavens.designbymobius.ca/artistes#donmoen

4

1 に答える 1

0

解決しました!!!

問題の原因となった要因の組み合わせがありました。

  1. 高さが設定されていません(または親要素)。
  2. モバイル デバイスでの固定位置の不具合

その知識を武器に、私は:

  1. position プロパティを static に変更しました。
  2. ウィンドウのサイズが変更されるたびにトリガーされる幅の固定比率 (私は 0.5625 を使用) として高さを設定する小さな関数を作成しました。ビデオのサイズが柔軟になり、比率が完全に維持されます。
  3. トップ値を(viewport height - video height) / 2+として設定する 2 番目の関数を作成しましたwindow.pageYOffset。ページをスクロールするたびにトリガーされます。

最終結果は、比率を維持しながら幅を動的に調整し、位置の効果をシミュレートする静的な位置のビデオです。

最終結果はここで見ることができます。クリックしてアーティスト プレビュー ビデオをご覧ください :)

于 2012-12-20T17:12:57.427 に答える