uuAltCSS 開発ログ

js 問題

問題1. 子要素に position: absolute + right: が設定されていると、子要素が身切れる


<!doctype html><html><head><title></title>
<style>
.view-box1 {
  padding: 10px;
  position: relative;
  top: 10px; left: 10px;
}
.box1 {
  border: 4px solid navy;
  -uu-border-radius: 4px;
  -uu-box-shadow: skyblue 10px 10px 5px;
  width: 300px;
}
.view-box2 {
  padding: 10px;
  position: absolute; // absolute
  right: 10px; // right
  top: 20px;
}
.box2 {
  border: 4px solid navy;
  -uu-border-radius: 4px;
  -uu-box-shadow: skyblue 10px 10px 5px;
  -uu-background-image: url(cover14.jpg);
  width: 160px;
  height: 100px;
}
</style>
<script src="uuAltCSS.js"></script>

</head><body>

<div class="view-box1">
  <div class="box1">
    box1

    <div class="view-box2">
      <div class="box2">
        box2
      </div>
    </div>
  </div>
</div>

</body></html>

原因は、Layerの view.style.overflow = "hidden" が設定されていたためです。
uuLayerの第三引数を追加し対処しました。

// src/uuLayer.js
_layer =
    function(view,     // @param Node: layer container
             width,    // @param Number: view width
                       //        /CSSString(= "auto"): 300 "300px" "auto"
             height,   // @param Number: view height
                       //        /CSSString(= "auto"): 150 "150px" "auto"
             option) { // @param Hash: { HIDDEN:    0, // 1: overflow = "hidden"
                       //                FLYWEIGHT: 1  // 1: ctx.xFlyweight = 1
                       //              }
  this._option = _mix(option || {}, { HIDDEN: 0, FLYWEIGHT: 1 }, 1);

  // view style
  (this._option.HIDDEN) && (view.style.overflow = "hidden");
}

// src/uuAltCSS.boxeffect.js
_boxeffect = function(node, excss) {
  bfx.layer = new uuLayer(view, declw, declh, { HIDDEN: 0 });
}

親要素も身切れている問題は、子要素の幅,高さを取得するタイミングを変えて対処しました。

問題2. 関数呼び出しを減らしたい

あるページでは、Math.round が 3300回呼ばれています。
速度に関係する主要な部分の Math.round(a) を (a + (a < 0 ? -0.49 : 0.5)) | 0 に置換することで、50ms程速くなりました(in IE6)。

Math.round(-2.501) と (-2.501 + (-2.501 < 0 ? -0.49 : 0.5)) | 0 で結果が異なりますがそれは承知の上です。