IEPNGFix V2とは別の方法でIE6で透過png画像を背景画像として敷き詰める

JavaScript 問題 uupaa.js

実装途中の覚書。

透過pngの背景画像をタイリングするのはかなり大変

ちょっと前に、「IEPNGFix ver2.0αが、background-image: url(alpha.png); background-repeat: repeat-x; background-position: 10% 20% をサポートした」というニュースがありました。
どうやら、IEPNGFix は .htc + .js を使い、画像をクリッピングしてdiv要素を後ろに敷き詰める方式のようです。

uupaa.js でも同様の機能をサポートする予定はあったのですが、優先度が低く未着手のままでした。

VMLベースでサポートしてみることに、

uupaa.js は IEPNGFix が採用した方法ではなく、VMLベースで実装することに。
その理由は、

  • 10px 程度の小さなpng画像をdiv + AlphaImageLoaderでタイリングすると運用上の問題が発生しそう。VMLはタイリング機能をネイティブで持っているのでdivを敷き詰めるよりは低負荷にできそう。
    • 運用上の問題: 一般ユーザ(技術的背景はどうでもいい/ソースコードなんて見ない人達)が、小さな画像を敷き詰めようとして「遅くなる」「バグだ」とか言いだしそう。
      • 最初からタイリングしておいた大きめの画像を用意するなどして、PCが非力だった頃のやり方に戻ればOKなんだけど、できれば技術でカバーしたい。
  • VMLなら、IE6でも透過pngが使える。
現状

単体動作可能なレベルまでこぎつけた。

解決済みの問題1

max-width: と組み合わせると resize イベントが定期的に発生し、モッサリしてしまう。
max-width: で使用している element.getBoundingClientRect() で リサイズイベントが発生している。
element.offsetHeight などのリフローが関係するプロパティにアクセスすると resize イベントが発生している。
resizeイベントが連続して発生すると、勝手にスクロールしてしまう(特に左右のスクロールバーが顕著)
→ 最後に配給したイベントを覚えておき、resizeイベントが連続した場合は無視するようにして対策。

解決済みの問題2

elm.insertAdjacentHTML("beforeEnd", VMLな文字列) として末尾に追加すると position: absolute; top: 0; としていても、コンテナ要素の高さ(offsetHeight)が19pxほど増えてしまう。
elm.insertAdjacentHTML("AfterBegin", VMLな文字列) として先頭に追加すると、高さが変化せずにすむ。
3時間悩みまくった。