knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

グラデーションが意図しない表示になる

 

 

 

background-sizeに起因

CSS3ではグラデーションをスタイルシートで設定できるようになりましたが、まれに端末によっては、下図のように意図しない表示をしてしまうときがあります。 f:id:ShinImae:20151210114636j:plain

もしbackgroundプロパティでグラデーションを実装している場合、(たとえCSSで明示的に指定していなくても)background-sizeに起因しているようです。

background-sizeの値を初期化すれば、意図した表示に戻ります。

.ELEMENT{
    background:linear-gradient(135deg, rgba(241,248,252,1) 0%, rgba(188,220,236,1) 100%);
    background-size:auto;
}