CSSでのプログレスバーの表現が環境によって違う

Question

AjaxとCSSを利用して、データベースを3秒おきに確認し、状況を計算してプログレスバーを表現しようとしています。

JavaScriptの部分は

$(function(){
    var per = 0;
    var progressBar = document.getElementById('uploadprog');
alert(progressBar);
    function updateProgress(newValue){
        if(newValue < 0){
            newValue = 100;
            [画面遷移];
        }
        progressBar.value = newValue;
        setTimeout(
            function(){
                $.ajax({
                    type: "POST",
                    url: "[データチェック用ページ]",
                    data: { "PER": newValue},
                    async: false,
                    success: function(j_data){
                        obj = JSON.parse(j_data);
                        per = obj.Percent;
                    }
                });updateProgress(per);
            }, 3000);
    }
    updateProgress(per);
}

と記載しています。
データチェック用ページではパーセントを取得し、変数名:Percentに入れて返しています。
その中で処理が完了すればPercentに-1を入れて返し、画面遷移する動きとなっています。

ローカルではVisual Studioで開発をしていてデバック確認を行っています。

そこでローカルでのデバック確認と、Webサイトを発行して配置した時とで挙動が違うパターンが発生して解決出来ません。

ローカル：Windows 10
Webサイト：WindowsServer 2008 R2

Microsoft Edge、Firefox共に
ローカル…プログレスバーが表示され、処理も正常に行われる
Webサイト…プログレスバーが表示され、処理も正常に行われる

Internet Explorer 11
ローカル…プログレスバーが表示され、処理も正常に行われる
Webサイト…プログレスバーが表示されず、処理が完了しない

処理が正常に行われれば100%に達して処理が完了し、画面遷移するのですが、処理が完了しないIE11でWebサイトではAjaxで飛ばした結果が全く変わらずに返ってくる状態でした。
(一度取得された同じ数字が何度も出てくるのをalertで確認)
そちらはまた別途確認が必要ですが、プログレスバーが表示されないのが一番の問題点です。

このサンプルに書いている「alert(progressBar);」の結果は
プログレスバーが表示される場合…「Object HTMLProgressElement」
プログレスバーが表示されない場合…「Object」
となります。

ローカルでは表示されるため、ブラウザの問題ではないとは思っているのですが、なにか他に理由がありますでしょうか？

プログレスバーのCSSはhttps://developer.mozilla.org/ja/docs/Web/HTML/Element/progressを参考にしています。

Comments

[退会済みユーザー]

「ローカルではVisual Studioで開発をしていてデバック確認」というのが IIS Express 上で実行しての話なら、IIS Express を使うのは止めて、代わりにローカル IIS を使えるように設定し、開発環境と実行環境をほぼ同じにして試してみてはいかがですか？

[lordes]

ご提案ありがとうございます。ローカルIISに配置して実行してみましたが、IE11で意図する(プログレスバーが表示され、処理が完了する)動きとなりました。IISのバージョンなどで変わってくるのでしょうか…

[x_x]

IEが互換表示モードになっていないでしょうか？

[lordes]

ありがとうございます！イントラネットが互換表示になっていて、それを解除したら出てきました。

[退会済みユーザー]

> ローカルIISに配置して実行してみましたが、IE11で意図する(プログレスバーが表示され、処理が完了する)動きとなりました。　← 同じ問題が再現できれば解決のためのヒントが見つかるかもと思ったのですが、再現できないとなると、後は、Fiddler などのキャプチャツールを使って、うまくいくときと行かないときの要求・応答のヘッダ・コンテンツの違いを調べてみることでしょうか。

[lordes]

助言ありがとうございました。上にも記載しましたが、互換表示の問題でした。

[退会済みユーザー]

> IISのバージョンなどで変わってくるのでしょうか…　← IIS のバージョンは関係ないと思います。今回のような違いが出るとすると、考えられるのは User-Agent を見て応答を変えているということぐらいです。ひょっとしたらブラウザ定義ファイルの問題があるかもしれませんので、それも調べてみることをお勧めします。かなり昔の話ですが、IE でブラウザ定義ファイルの問題があったと記憶しています。

[退会済みユーザー]

レスが行き違いになってしまいました。すみません

[lordes]

いえ、ありがとうございます。IISのバージョンであれば他でも同様に出てこないだろうとは思っていたので、その線はないだろうとは思っていました。

[退会済みユーザー]

progress 要素は HTML5 なので IE11 の互換表示では動かなかったということですね。互換モードでも動く jQuery UI の Progressbar を使って http://surferonwww.info/BlogEngine/post/2015/12/28/show-progress-of-task-being-performed-at-server-side.aspx のようにするという方法もあります。役に立たない情報だとは思いますが、ご参考まで。

[lordes]

ありがとうございます。こちらの方法だと互換モードでも動くのですね。必要とあればこちらも考えてみます。

Answer 1

解決したようですが、このようなことが起こらないようあらかじめ X-UA-Compatible ヘッダに IE=edge を指定しておくことをお勧めします。
https://blog.shibayan.jp/entry/20130518/1368861454
https://hebikuzure.wordpress.com/2014/11/20/how-to-use-x-ua-compatible/

Web.config 設定例

        <add name="X-UA-Compatible" value="IE=edge" />

Comments

[lordes]

IEのベースを決めてしまう、と言う方法ですね。
一度組み込んで試してみます。

Answer 2

x_xさんのご指摘のとおり、IEの互換表示を解除したら解消しました。