Mac の食えない野郎ども

〜 Mac版 IE4.5 の傾向と対策 〜

Mac版 IE4.5 は OS添付のブラウザの割に、色々と問題の多いブラウザです。 特に JavaScript に関しては製品とは呼べない致命的な問題を多く抱えています。

しかし、だからといって Mac ではかなり普及してしまっている IE4.5 を除外するのも避けたいものです。 できる限り他のブラウザと同様、正常(笑)に動作させたいものです。

そこで、ここではスクリプトの動作上致命的になりやすい IE4.5 の問題の紹介とできれば、 その対策を採り上げたいと思います。

※ ここで挙げている内容は、たまたま Mac を借りた時に調べたことを基にしています。 ですから、この項目は実際と異なってしまっているものもあるかもしれません。

また、時間的都合から1台の Mac に IE4.5, IE5 をインストールして確認していたため、 単独でインストールしている場合と動作が異なる場合もあるかもしれませんのでご注意下さい。

Mac欲しいなぁ〜、誰かくれないかなぁ... f(^^;


目 次

キャッシュ制御
IE のキャッシュ制御はバグが多いけど、IE4.5 はひと味違う。
insertAdjacentHTML メソッド
insertAdjacentHTML は、ただの飾り?
レイアの padding 指定
う〜む。なんともコメントのしようのない問題だ...
IFRAME 内のドキュメントサイズ
なぜこんなところでバグる?
描画抜け
IE は描画抜けが多いけど IE4.5 は、また格別
クリップ操作
これも、描画抜けと言えば描画抜けなんだけど、それ以前の問題なんだよね〜
onkeydown イベント
まあ、仕様と言えば仕様なんだけど、JavaScriptのバージョンはなんなの?
読み込んだ画像のサイズ
こんなところでも手抜き...
FORMのテキスト入力域
ん〜。ひょっとすると「ことえり」の問題かも...

キャッシュ制御

ブラウザのキャッシュ制御は通常、読み込んだページ( ファイル )をキャッシュするのに対して、 IE4.5 のキャッシュは表示中のページの状態をキャッシュするようです。

つまり、動作の途中で別のページに移り、再び元のページに戻ると他のブラウザでは Web からファイルを読み込む代わりにキャッシュを読込み、最初から実行しますが、 IE4.5 では移る前の続きから動作します。

これは一見、画期的に見える動作ですが、例えば BODY部で現在時刻を document.write したとしても表示は変化しません。
最も大きな問題は onLoad イベントが発生しないことでしょう。(-_-;

このために onLoad イベントをきっかけに動作するスクリプトは正常に動作するのは 最初の1回目のみで2回目以降はキャッシュにある間は正常に動作しないことになります ( 「戻る/次へ」動作を検出することすらできません )。

この問題はメモリキャッシュの問題なので HTTP ヘッダや HTML の META タグなどでの キャッシュ制御は効きませんので、現在のところ決定的な解決策はありません(泣)。

※ 無理矢理、強引に回避する方法で良いならページ表示時( onLoad時など )に Cookie やフレームの親にメモを残しておいて、このメモが変わっていないかを setTimeout で監視すれば何とかなりそうなんですけど、これじゃあねぇ〜 f(^^;;


insertAdjacentHTML メソッド

通常レイア内の HTML を書き換えるのに insertAdacentHTML を使用しますが、 Mac版 IE4.5 では正常には動作せず、表示内容を壊します。 それを何回も続けると異常終了します(笑)。

しょうがないので innerHTML を使用すれば良いようです。

しかし、innerHTML への書き込みは insertAdjacentHTML と異なり、書き込む以前に生成されている オブジェクトは再生成されますので、以前にオブジェクトをアクセスしている変数などは再設定が 必要になりますので注意が必要です。

もし、あなたのご使用のブラウザが Mac版IE4.5 なら 実際にこちらで確認することができます。


レイアの padding 指定

スタイルに padding が指定してあるレイアに、JavaScript で位置( style.left, style.top ) を指定する場合、レイアの位置が padding 分ずれます。

しょうがないので、padding を 0 に設定して使用するしかなさそうです。

もし、あなたのご使用のブラウザが Mac版IE4.5 なら 実際にこちらで確認することができます。

※ これじゃあ、対策にもならん(T_T)


IFRAME 内のドキュメントサイズ

IFRAME で表示している HTML のドキュメントサイズは document.body.scrollWidth/scrollHeight で取得できますが、Mac版 IE4.5 では IFRAME 自体のサイズが設定されています。

この問題は実は scrollWidth/scrollHeight が offsetWidth/offsetHeight と逆に設定されているためにこのようになります。 必要ならプラットフォーム・ブラウザ・バージョンの判定をして offsetWidth/offsetHeight を scrollWidth/scrollHeight と読み替えて使用します。
#> 逆もまた真なり ^^;

因みに IFRAME でない通常のドキュメントサイズは正常のようですのでご安心を。

もし、あなたのご使用のブラウザが Mac版IE4.5 なら 実際にこちらで確認することができます。


描画抜け

setTimeout などを使用して連続的に表示内容を更新する処理では描画抜けが発生します。

※ 実は頻度の差はありますが、Win版でも IE なら定常的に発生している問題でもあります。

これも、処置なしです。
せいぜい、処理の最後に visibility を設定し直すくらいでしょうか... f(^^;;


クリップ操作

style.clip 属性を設定してもクリップされないようです。

実はクリップされないのではなく、描画されない問題なのです。 Mac版 IE4.5 では表示内容を変更しても描画(更新)されないプロパティが複数あるらしく、 もし、レイアの移動などの処理と同時に行うなら移動処理を最後にすれば更新されます。 移動操作もない場合は visibility の再設定などで描画が必要なことをブラウザに教えれば 解消できるでしょう。

もし、あなたのご使用のブラウザが Mac版IE4.5 なら 実際にこちらで確認することができます。


onkeydown イベント

Mac版 IE4.5 では onkeydown イベントはサポートされていません。

まあ、仕様といえば仕様なのですが... onkeypress を使用するしかありませんね。 f(^^;;


読み込んだ画像のサイズ

JavaScript 1.1 から Image オブジェクトが新設されましたが、 Mac版 IE4.5 ではこれも中途半端のようです。

Image オブジェクトは初期表示時には表示しない画像を 事前に読み込む場合などによく使われます。

imgObj    =new Image();
imgOjb.src='mark.gif';

と言った具合です。 この Image オブジェクトには width, height のプロパティがあり、 これらは画像のロード時に、未知の画像のサイズを取得したり、 画像の表示サイズを決定する場合に使用します。

imgObj    =new Image(16,16);
imgObj.src='mark.gif';

この画像サイズは、例えばこのオブジェクトに設定されているサイズを基に document.write で IMGタグ を生成する際によく使用されます。

document.write(
   '<img src="'+imgObj.src
  +'" width='+imgObj.width
  +' height='+imgObj.height+'>'
  );

ところが、Mac版 IE4.5 はこれらのプロパティには何も設定されません。 それどころかオブジェクト生成時にサイズを指定したとしても 無視されて常に "0" が設定されるようです。

そこで、前述の IMGタグの出力は結果として

<img src="mark.gif" width=0 height=0>

となり、不可視の画像が生成されることになります。

これではしょうがないので、対策としては width, height を使用しないようにするか、 またはブラウザ・バージョン・プラットフォームなどの条件判断を入れて

imgObj = new Image(16,16);
if(Mac版 IE4.5){
  imgObj.width  = 16;
  imgObj.height = 16;
}

として改めて width, height プロパティを設定してやります。

※ Image オブジェクトの width, height プロパティは、 NN では read only のプロパティです。

ここまで来ると、Image オブジェクトは本当に指定した画像を読み込むのか不安ですね〜。 そこでアクセスログを見てみると、やはり何もアクセスしていませんでした(笑)。


FORMのテキスト入力域

通常に FORM を使用する分にはよいのですが、レイア内のFORMを配置した場合、 レイアを移動すると FORM内の入力域( TEXTAREA, TEXT )はお話になりません。

つまり、表示域と入力位置が生き別れになります。 f(^^;

※ この現象はどのブラウザでも発生するので、 ひょっとすると「ことえり」の問題なのかもしれません。
アタシは Mac に詳しくないので...


Copyright(c) 2000 ShinSoft. All rights reserved.