曲線は美しい

js CSS

ぐあい悪いけど無理してログ書くよ。

昨日の日記 ⇒ 日食 と uuAltCSS.js と CSS3 multiple background image - latest log だと、画面幅を縮めると魚の尻尾みたいなレンダリング(↓)してましたが、今日はそのへんを主に改善してました。

魚の尻尾は、border-radius: 指定時に、ボックスの 幅/2 または 高さ/2 よりも 角丸の半径(r) が大きすぎる場合に発生します。
本来の指示通りにはレンダリングできない状態なので、border-radius: の境界条件かな(実装依存かな)?


Google Chromeのようなレンダリング(↑)をしたかったのに、頭がうにってるので、このように卵型のボーダーをレンダリング(↓)するコードができました。

本来なら廃棄しなきゃならないコードなのですが、元々無茶な半径を指定されてるし「卵かけごはんとか食べたいなぁ〜」ゲフンゲフン だったので、これは仕様ということにします(後で思い直すかもしれないけど)修正しました。

ちなみに、Safari4 に同じ CSS を食わせると角丸のレンダリング(↓)を放棄(?)します。これもこれでアリかな。

反省会

  • 頭がぐらぐらするときに「半径が…で、円を12分割して…この場合は円弧時計回りで…」とかやってたんで、作業途中はこんな状態に(↓)。

  • コーディングは呼吸と一緒だから体への負荷はほぼないんだけど、文章書くのはなんか大変なの。
  • 卵型のボーダーは、幅/2 または 高さ/2 よりも大きすぎる半径を指定した場合に現れます。半径が十分に小さければ他のブラウザと同じレンダリングになります。
  • あと、レンダリングを非同期(遅延で)でやるようにしたので、レスポンスが改善されてます。
    • ウインドウリサイズで固まる時間が減って、その間にスクロールとかできるようになりました。