CSSでrotateしたグラデーションにジャギーが出来るのを改善する方法 「Fixing a bad render in Webkit」

WS002386
このエントリーをはてなブックマークに追加
PR

Fixing a bad render in Webkit
By Derek Hill

DEMO 表示

CSSで背景をグラデーションにしたものを rotateで傾けた場合に現れるギザギザに表示されるのを解決する方法です

 

webkitでの解決方法

translate3dを付け加えることでスムーズにする

 

CSS 通常

-webkit-transform: rotate(-5deg);

 

 

CSS 回避策

-webkit-transform: rotate(-5deg) translate3d(0, 0, 0);

 

transformにtranlate3dを加えるだけです、translate3dの中身はすべてゼロにすることで位置に影響を与えません
こういった回避方法があるので覚えておくといいですね

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)