Safariの最近のブログ記事

ウェブサイトの印刷時に遭遇した不具合とその対応をメモ。
印刷プレビューだとコードインスペクタも使えないし、なかなか原因が分からないですね。

印刷の最後に真っ白なページが出る(主にFirefox3、IE8、IE7)

ページ内のブロック要素にmin-heightを指定していると発生。印刷用CSSでmin-height: inherit min-height: 0などとする。inheritだとIE7でまだ空白ページが出た。
なお、印刷の途中に真っ白なページが出るのは、その前後のブロックのpaddingが原因の場合がある。

印刷の最初に真っ白なページが出る(主にSafari4)

先頭のブロック要素にpadding-topがある事が原因。印刷用CSSでpadding-top: 0に。

画像が印刷されない(Opera10)

印刷用CSSで、画像のwidth、heightに実際より小さい値を指定する。遭遇したケースの場合、600x848pxの画像に対し、width: 599px、height: 846pxを指定したら印刷された。

今時Operaのシェアなんて無きに等しいので、「印刷の際には別のブラウザを使用してください」という断り書きでもいいのではないかと思う。

以下はSafari CSS Referenceの-webkit-transitionに関する項目も和訳かつ要約です。

以下はSafari Visual Effects Guide: Transitionsの和訳、要約です。

下記を読むと、touchstart、touchmoveと同様にtouchendでもevent.touches[0]が使用できそうに読み取れる。

しかしtouchend時点で指が離れているので、touchendでは使用できないので注意。
iPhoneのSafariでtouchendイベントを使うときの注意 - digital matterを参考にさせて頂きました。感謝。

Internet Explorer

Firefox

Safari

Chrome

Chrome 1.0がSafari 3.2とほぼ同様、Chrome 2.0がSafari 4.0とほぼ同様。

Opera

via. CSSの実装状況を知るには? - Web標準Blog

Firefoxのブックマーク同期アドオン「Firemarks」が、IE、Safariにも対応になって「Xmarks」に。
サイトおすすめ機能はどうでもいいけど、クロスブラウザになったのはうれしい。

TwitThis

今読んでいる記事をTwitterに投稿