タグ別アーカイブ: IE

ウィンドウのサイズを変えていないのに window.resize イベントが発生する

| コメントをどうぞ

IE8で、ウィンドウの大きさを変えていないのに window.resize イベントが発生することがあります。

再現方法

ドキュメント内で要素の高さを変更するだけで再現します。

以下、サンプルHTMLです。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script>
    function resized(e){
      alert("window resized!");
    }
    function doResize(){
      document.getElementById("field").style.height = "100px"
    }
    if (window.addEventListener) {
      window.addEventListener("resize", resized, false);
    }
    else {
      window.attachEvent("onresize", resized);
    }
    </script>
  </head>
  <body style="background-color:green;">
    <input type="button" id="doResize" value="ResizeTest" onclick="doResize()">
  <div id="field" style="background-color:#000000;color:#FFF;">リサイズテスト</div>
  </body>
</html>

続きを読む

IE10以降で iframe 内ドキュメントの表示が崩れることがある問題について

| 1件のフィードバック

IE10 以降で、iframeドキュメント内の表示が崩れることがあったので調査を行いました。

結果から書きますと、 iframe親のドキュメントモードが 9 以上、iframeドキュメントが IE5 Quirksモード である場合 に問題が発生する可能性があることがわかりました。

現象

  • 親(= iframe の親ドキュメント)はmetaタグで 最新のレンダリングモード(edge)が指定されている
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 子(= iframe ドキュメント)は古いドキュメントなので、Quirksモードでレンダリングされている。DOCTYPEスイッチで指定
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • 親ドキュメント内iframeから子を参照すると一部スタイルが崩れている
  • 子を iframe を介さずに直接表示した場合は問題なし
  • iframeを介して参照した時、子のドキュメントモードは「 10 」だった(IE10で参照)
  • iframeを介さずに参照した時、子のドキュメントモードは「 5 」だった(IE10で参照)

続きを読む

モバイル向けWebページでiFrameを使用する際のスクロール問題

| 5件の返信

infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。

 

サポートブラウザ

今回サポート対象となったブラウザ(OS)は以下になります。

  • Safari(iOS)
  • Android Browser(Android)
  • IE(Windowsタブレット)

 

DOCTYPE宣言

HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。

<!DOCTYPE HTML>

現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。
また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。
なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。

 

iOSのiFrameにおけるスクロール問題

iFrameにコンテンツを表示するために、以下のようにHTMLを記述してブラウザで表示してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm {
      width:300px;
      height: 250px;
      border:none;
    }
  </style>
</head>
<body>
  <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
</body>
</html>

Android BrowserとIEでは問題ありませんでしたが、

IE(Windowsタブレット)の場合

IE(Windowsタブレット)の場合

iOS Safariで表示してみると、コンテンツのサイズに合わせてiFrameがのびてしまいました。PC向けのサイトだと以下のように画面一杯に広がってしまいます。

iframe-safari-err


iOS Safariの場合

 

どうやらiOS Safariではiframeのscrolling属性が”auto”、もしく”yes”の場合、指定したサイズが効かないらしく、他の方のブログを参考にさせて頂いてiframeの直上にスクロール要素を用意する方法が有効である、ということが分かりました。
エージェントで判別してiOS Safariの場合だけ直上にスクロール要素を用意する方法も考えましたが、
煩雑になると思いCSSで対応することにしました。

以下のように記述し、実機で確認してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }
    .ifrm {
      width:100%;
      height:100%;
      border:none;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
</body>
</html>

SafariではiFrameの高さも固定され問題なくスクロールできるようになりましたが、
今度はAndroid BrowserとIEで2重にスクロールバーが表示されるようになってしまいました。

2重スクロール(IEの場合)

2重スクロール(IEの場合)

 

2重スクロールへの対処

どうやらiframeの高さがうまく調整できていないのが原因のようです。
iframeの下に余白が発生してしまっています。

試行錯誤の後、iframe要素に明示的に「display:block;」を指定することで回避できました。
理由はよく分かりません、デフォルトの表示形式が「inline-block」だとしても高さ調整は可能なはず…
対処するのに半日ほど掛かってしまいました…。
最終的に作成できたHTMLは以下になります。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <style type="text/css">
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      display: inline-block;
      margin: 10px;
    }

    .ifrm {
      width:100%;
      height:100%;
      border:none;
      display:block;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
  <div class="ifrm-container">
    < iframe class="ifrm" scrolling="auto" src="http://jquery.com/"></iframe>
  </div>
</body>
</html>

IE9 iframeを用いたサイトのドキュメントモード

| コメントをどうぞ

IE9においてiframeを用いたサイトを構築する場合、フレーム内のドキュメントモードに注意する必要があります

iframe Handling (英語)によると、IE9 では、iframe 内のドキュメント モードはトップ レベルの Web ページのドキュメント モードで決まります。トップ レベルの Web ページが IE9 標準モードでない場合、iframe内のサブドキュメントはどのような指定をしても IE9の標準モードではレンダリングできません。

例えば以下の様なコンテンツを作成したとします。

■ index.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>

<!-- ドキュメントモードにIE8標準モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=8">

<title>index</title>
<script type="text/javascript">
window.onload = function(){
var mode = document.documentMode;
document.body.innerHTML = "Document mode: " + mode;
};
</script>
</head>

<body>
<iframe id="ifrm" src="contents.html" />
</body>
</html>

■ contents.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>

<!-- ドキュメントモードにIE9標準モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>contents</title>
<script type="text/javascript">
window.onload = function(){
var mode = document.documentMode;
document.body.innerHTML = "Document mode: " + mode;
}
</script>
</head>

<body>
</body>
</html>

上記の例ではindex.html内にiframeを配置し、その中にcontents.htmlを表示するような指定となっています。contents.htmlはmetaタグの指定によりIE9標準モードでのレンダリングを行うよう指定していますが、トップレベルであるindex.htmlはmetaタグの指定によりIE8標準モードでのレンダリングとなっています。このような状態でindex.htmlをIE9で表示すると、contetns.htmlはmetaタグの指定に関わらず、IE8標準モードでレンダリングされることになります。

このようにiframe内のコンテンツがコンテンツ制作者の意図しないドキュメントモードでレンダリングされないようにするため、サイト内にiframeを用いる場合はトップレベルのドキュメントモードをIE9標準モードとする必要があります。