none
IE8 RC1 onresizeにおけるoverflowの扱いについて RRS feed

  • 質問

  •  本日IE8 RC1がリリースされていたのでインストールしました。
     IE8 beta2で確認されていた現象があり、IE8 RC1でもまだ変わっていなかったのでご質問させて頂きます。
     
    JavaScriptでブラウザウィンドウのサイズが変ったときに、スクロールバーを含んだブラウザサイズを取得する必要があり、resizeイベントで以下の処理を実装しています。

      ①body要素のoverflowを一時的にhiddenにする
      ②document.documentElement.clientWidth及びdocument.documentElement.clientHeightでサイズを取得
      ③body要素のoverflowを元に戻す

     IE8 標準モードでこの処理を行うとスクロールバーが表示されるサイズでページを表示した際に処理が無限ループしてしまいます。
     以前のIEや、他のブラウザでは無限ループに入る問題は発生しませんので、不具合と認識しておりますが如何でしょうか。
     

     是非、回答頂けることを期待しております。



    (サンプルソース)
    ※注意:このサンプルソースは、無限ループに入りますのでご注意下さい。
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript">
    var _count = 0;
    function resizetest() {
        // サイズ取得用に一時的にoverflowを非表示に設定
        var _overflow = document.body.style.overflow;
        document.body.style.overflow = "hidden";
       
        _count++;
       
        var _str = "";
        _str += _count + "<br />";
        _str += "document.body.scrollWidth=" + document.body.scrollWidth + "<br />";
        _str += "document.body.clientWidth=" + document.body.clientWidth + "<br />";
        _str += "document.body.offsetWidth=" + document.body.offsetWidth + "<br />";
        _str += "document.documentElement.scrollWidth=" + document.documentElement.scrollWidth + "<br />";
        _str += "document.documentElement.clientWidth=" + document.documentElement.clientWidth + "<br />";
        _str += "document.documentElement.clientWidth=" + document.documentElement.clientWidth + "<br />";
        _str += "document.documentElement.offsetWidth=" + document.documentElement.offsetWidth + "<br />";
        _str += "<br />";
        _str += "document.body.scrollHeight=" + document.body.scrollHeight + "<br />";
        _str += "document.body.clientHeight=" + document.body.clientHeight + "<br />";
        _str += "document.body.offsetHeight=" + document.body.offsetHeight + "<br />";
        _str += "document.documentElement.scrollHeight=" + document.documentElement.scrollHeight + "<br />";
        _str += "document.documentElement.clientHeight=" + document.documentElement.clientHeight + "<br />";
        _str += "document.documentElement.clientHeight=" + document.documentElement.clientHeight + "<br />";
        _str += "document.documentElement.offsetHeight=" + document.documentElement.offsetHeight + "<br />";
        document.getElementById("output").innerHTML = _str;
       
        // overflowを元に戻す
        document.body.style.overflow = _overflow;
    };
    </script>
    </head>
    <body onresize="resizetest();">
        <div><input type="button" value="getValue" onclick="resizetest();"></div>
        <div id="output">
            resize window!<br /><br />
            確認済み不具合<br />
            ・onresizeイベント内でoverflowを変更したタイミングで再度resizeイベントが発生するらしく、無限ループに入る
        </div>
    </body>
    </html>
     
    • 編集済み ka2q 2009年2月5日 0:18
    2009年1月27日 2:42

回答

  • こんにちは。大変ご無沙汰しています。五寳です。
    さて、この onresize の問題ですが、すでに別のベータユーザー様によってフィードバックがされており、RC1 で修正されているというステータスになっていました。

    私の環境で試したところ、 (XP SP3 + IE8 RC1) の環境では発生しましたが、古いはずの Windows7 ベータ (IE8 RC1 一歩手前 Build) では問題が発生しなかったので、社内の最新 Build にて XP SP3 + IE8 最新 Build で確認したところ、問題は修正されていました。
    念のため、なんどもウィンドウの端を持って、ぐりぐりサイズ変更させてみましたが、XP+RC1 のように勝手にカウントアップされるような現象はありませんでした。

    回答が遅くなってしまって、すみませんでした。
    今後もよろしくお願いします。
    五寳

    • 回答としてマーク ka2q 2009年2月13日 6:00
    2009年2月13日 5:20

すべての返信

  • 私が登録したスレッドについて、ことごとく返信を頂けないのですが。。。

    Internet Explorer フォーラムを開設しました に、"~Microsoft社員が責任を持って製品フィードバックとして米国開発チームへ報告いたします。~"とありますし、フィードバックはされていると考えていいのでしょうか???
    2009年2月3日 8:27
  • 少々手直しが必要でしたが、期待通りに動きましたよ?少なくとも、ハングアップしたりはしませんでした。

    手直し:
    • <br>→<br />(XHTML では必須)
    • 大文字の要素名→小文字(XHTML なので。html, body, head)
    • script 要素に type 属性(必須属性)を付加
    • <div><input></div>→<div><input /><div>(XHTML では必須)

    おっと失礼、「無限ループ」ね。カウンターが止まらなくなる、ですね。確認しました。

    Jitta@わんくま同盟
    2009年2月4日 6:47
  • ん~。。。どうも、body 要素で onresize イベントが発生することが、バグのような?
    http://msdn.microsoft.com/en-us/library/ms535205(VS.85).aspx body 要素
    http://msdn.microsoft.com/en-us/library/ms536959(VS.85).aspx onresize イベント

    body 要素に定義されているのは onresizestart と onresizeend イベントで、onresize イベントは定義されていません。かといって、onresizeend イベントをハンドルさせるようにしても、発生しない...

    Jitta@わんくま同盟
    2009年2月4日 7:23
  •  返信ありがとうございます。

    ソースが荒くてすいません。
    ご指摘頂いた手直しの内容について、サンプルソースを修正しました。
    2009年2月5日 0:21
  • jittaさん 返信ありがとうございます。

    確かにbody要素のresize関連イベントは、リファレンス上と実際の動作とでは異なるようですね。。。


    window要素にはリファレンス上でもonresizeイベントが定義されているようです。
    http://msdn.microsoft.com/en-us/library/ms535873(VS.85).aspx window要素


    そこで、onresizeイベントをbody要素からwindow要素に変更して試してみました。

    結果は・・・やっぱり変わらずに無限ループに突入してしまいました。



    (サンプルソース)
    ※注意:このサンプルソースは、無限ループに入りますのでご注意下さい。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript">
    var _count = 0;
    function resizetest() {
        // サイズ取得用に一時的にoverflowを非表示に設定
        var _overflow = document.body.style.overflow;
        document.body.style.overflow = "hidden";
       
        _count++;
       
        var _str = "";
        _str += _count + "<br />";
        _str += "document.body.scrollWidth=" + document.body.scrollWidth + "<br />";
        _str += "document.body.clientWidth=" + document.body.clientWidth + "<br />";
        _str += "document.body.offsetWidth=" + document.body.offsetWidth + "<br />";
        _str += "document.documentElement.scrollWidth=" + document.documentElement.scrollWidth + "<br />";
        _str += "document.documentElement.clientWidth=" + document.documentElement.clientWidth + "<br />";
        _str += "document.documentElement.clientWidth=" + document.documentElement.clientWidth + "<br />";
        _str += "document.documentElement.offsetWidth=" + document.documentElement.offsetWidth + "<br />";
        _str += "<br />";
        _str += "document.body.scrollHeight=" + document.body.scrollHeight + "<br />";
        _str += "document.body.clientHeight=" + document.body.clientHeight + "<br />";
        _str += "document.body.offsetHeight=" + document.body.offsetHeight + "<br />";
        _str += "document.documentElement.scrollHeight=" + document.documentElement.scrollHeight + "<br />";
        _str += "document.documentElement.clientHeight=" + document.documentElement.clientHeight + "<br />";
        _str += "document.documentElement.clientHeight=" + document.documentElement.clientHeight + "<br />";
        _str += "document.documentElement.offsetHeight=" + document.documentElement.offsetHeight + "<br />";
        document.getElementById("output").innerHTML = _str;
       
        // overflowを元に戻す
        document.body.style.overflow = _overflow;
    };

    window.onresize = resizetest;
    </script>
    </head>
    <body>
        <div><input type="button" value="getValue" onclick="resizetest();"></div>
        <div id="output">
            resize window!<br /><br />
            確認済み不具合<br />
            ・onresizeイベント内でoverflowを変更したタイミングで再度resizeイベントが発生するらしく、無限ループに入る
        </div>
    </body>
    </html>

    2009年2月5日 1:32
  • ka2q の発言:

    Internet Explorer フォーラムを開設しました に、"~Microsoft社員が責任を持って製品フィードバックとして米国開発チームへ報告いたします。~"とありますし、フィードバックはされていると考えていいのでしょうか???



    フォーラム担当者様

    上記の件、如何でしょうか???
    2009年2月11日 23:59
  • ka2q の発言:

    ka2q の発言:

    Internet Explorer フォーラムを開設しました に、"~Microsoft社員が責任を持って製品フィードバックとして米国開発チームへ報告いたします。~"とありますし、フィードバックはされていると考えていいのでしょうか???



    フォーラム担当者様

    上記の件、如何でしょうか???



    忙しいみたいです、公私ともに。。。
    今週末にでも、私の方から Connect へフィードバックしてみます。

    あと、onresize の件、Connect にありました。→ https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=364571
    Jitta@わんくま同盟
    2009年2月13日 3:18
  • こんにちは。大変ご無沙汰しています。五寳です。
    さて、この onresize の問題ですが、すでに別のベータユーザー様によってフィードバックがされており、RC1 で修正されているというステータスになっていました。

    私の環境で試したところ、 (XP SP3 + IE8 RC1) の環境では発生しましたが、古いはずの Windows7 ベータ (IE8 RC1 一歩手前 Build) では問題が発生しなかったので、社内の最新 Build にて XP SP3 + IE8 最新 Build で確認したところ、問題は修正されていました。
    念のため、なんどもウィンドウの端を持って、ぐりぐりサイズ変更させてみましたが、XP+RC1 のように勝手にカウントアップされるような現象はありませんでした。

    回答が遅くなってしまって、すみませんでした。
    今後もよろしくお願いします。
    五寳

    • 回答としてマーク ka2q 2009年2月13日 6:00
    2009年2月13日 5:20
  • Jittaさん。
     いろいろとありがとうございました!!


    五寳さん。
     お忙しい中、ありがとうございます。

     RC1で一度ロールバックしてしまったが、最新版で再度修正されているということですね。。

     スッキリしました。ありがとうございました。
    2009年2月13日 5:59
  • "ka2q"です。
    (なぜか表示名"ka2q"が利用できなくなってしまっていた為、"ka2q_sak"としてコメントしています)


     五寳さんへ

    最新Buildで直っているとのご連絡を頂いていたので安心していましたが、IE8正式版リリースに伴い
    念の為、直っているのを確認しようと思い動作を確認したところ、結局直っておりませんが。。。

    どういうことでしょうか?????????

    ご回答をお願い致します。
    2009年3月23日 1:28
  • なんか、日英でコミュニケーション ミスがあるみたい
    https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=415514
    Jitta@わんくま同盟
    2009年3月23日 2:27
  • お疲れ様です。五寳です。
    フォーラムオーナーから連絡をもらって、ビックリしてすぐ確認しました。
    私が RTW 前に確認したのは、このフォーラムに書かれているサンプルソースを IIS において確認し、問題は発生せず修正されていると判断しました。
    (念のため、先ほどこのフォーラムのオーナーにも、確認してもらいましたが再現しなかったと連絡をもらっています。)

    しかしながら、Connect に上がっている Bug に書かれているサンプルサイトでは、問題が再現していることは確認しましたので、Redmond Team とのコミュニケーションを確認したところ、(Connect の解答欄にあるとおりですが、) まとめると、Connect で報告されているサンプルサイトに対する修正は行われていないが、一部の主要なサイトで確認された関連する問題については修正された、ということのようです。

    このフォーラムで提供されているサンプルファイルで以前再現していた問題はもう発生していないと思っていますが、いかがでしょうか?

    もし、そのようなサイトを見かけましたら、またみなさんからもフィードバックいただけましたら、幸いです。
    こちらから、Redmond の Site Compatibility Team に連絡したいと思います。

    よろしくお願いいたします。

    五寳





    2009年3月23日 5:39
  • Jittaさん 五寳さん

    ご返信ありがとうございます。

    私もIE8正式版で、このフォーラムに書いたサンプルソースをIISにおいて確認していますが以前同様無限ループの現象は出ています。

    私は以下手順で確認しています。

    ①IE8からIIS経由でサンプルソースのサイトへアクセス
    ②[ツール]の[開発ツール]を開きドキュメントモードが"IE8 標準"であることを確認
    ③縦スクロールバーが表示される状態までブラウザウィンドウを縮小
           ↓
     無限ループ発生(カウントアップが止まらない)

    (動作確認環境)
     OS:WindowsXP Professional Version2002 Service Pack 2
     ブラウザ:IE8 正式版(8.0.6001.18702)

    お手数ですが、今一度ご確認願います。
    2009年3月23日 6:41
  • ka2q(_sak) さん、ご連絡ありがとうございます。

    手元の環境では再現しなかったので、再度 XPSP3 をクリーンインストールした後、そのまま IE6 から IE8 に Upgrade した直後で確認したところ、(我々的にはここのサンプルについては修正できていると思っていたので、残念ながら。。。) 再現することを確認しました。
    では、どうして手元の環境では再現しなかったのか?と思い、一度 IE8 のオプションの詳細設定にあるリセットを行い、IE6 の設定を引き継がずに、IE8 本来の設定条件に戻し (通常私がテストする際には、問題切り分けをするために必ずリセットしていたので) たところ、再現する確率が下がりました。
    「再現する確率が下がりました。」というのは、問題を再現させた後、リロードすると再現しなくなったり、再現しなくなったところでウィンドウサイズをグリグリ変更すると、突然再現しだしたりする、ということです。

    Vista + IE8 と Windows 7 + IE8 では、このサンプルに対しては再現しませんでした。
    (Connect で報告されているサンプルサイトに対する修正はこちらも行われていません。)

    Connect の回答にあるように、完全に修正したわけではないため、このように再現してしまっているのだと思います。
    (ちなみに、RTW の一歩手前の Build では Vista と Win7 IE8 と同様に再現しなかったのですが。。。RTW 版で再発してしまったようです。)

    本件、完全解決に向けては次期 IE に向けて引き続きエスカレーションしたいと思います。
    しかしながら、元々のレポートの報告にある CPU/メモリ リソースを著しく消費したりハングアップするという現象は修正されていることと、実際のサイトで問題が発生しているところに対しては Workaround として、IE 8 互換モードで見たり、サイトオーナー側で Meta タグや HTTPレスポンス ヘッダーで X-UA-Compatible IE=7 などを指定することで回避できるため、私の今の感触では、残念ながら修正はあまり期待できません。
    また、リリース後の製品の修正はサポートチームが行っているため、IE8 に対する本件の修正についてもサポートチームへエスカレーションしたいと思いますが、次期 IE への対応と同様に、難しい状況なのは正直なところ変わりません。

    せっかくベータ期間中にフィードバックいただいていたのに、このような結果になってしまって大変申し訳ありません。
    先の回答にもありますように、もし実際の Web サイトにてこの Bug が原因で問題が発生しているサイトなどがありましたら、別途ご連絡いただきたいと思います。すでに対応してきたように、引き続き直接サイトオーナー様と連絡をとり、問題が発生しないように対応をフォローさせていただきたいと思います。

    よろしくお願いいたします。
    五寳

    2009年3月25日 3:12
  •  五寳さん

     ご対応及び、ご回答ありがとうございました。

     私は、仕事としてAjaxを活用したサイト開発を行なっております。

     Ajaxを活用した際を作成する際は、クロスブラウザに配慮し機能(スクリプト)をコンポーネント化することでサイト開発時にい
    ろいろと利用しています。

     コンポーネント化する際は、どのブラウザでも、どのような実装方法をしても開発者が意識することなく、安定したアウトプット
    が得られることを基本理念として構築しています。

     その独自コンポーネントの中には、ブラウザリサイズ時にスクロールバーのサイズを配慮してWindowサイズを正確に取得
    するようなコンポーネントも整備し、いろいろな場面で活用していました。

     今回の件は、これまでどのブラウザでも安定して動作していた独自コンポーネントに利用制限が発生する結果となっていまし
    まい、非常に残念に思っております。

     確かに、Metaタグ等でIE7モードで閲覧するようにすれば今まで通り動作することは理解しておりますが、既知のブラウザ
    Bugについて、サイト開発者側に対応を求めるというのは、個人的には正直理解に苦しむ部分があります。


     今後は標準的な手法となりつつあるAjaxサイトへの十分な配慮を是非期待したいと思います。


     最後に、Jittaさん。 五寳さん。
     この度はいろいろとご対応いただきありがとうございました。

                                                                                                                                        以上
    2009年3月25日 5:46