css3のfilterプロパティというものがある。
W3Cでは現在wokingdraft状態のもの。
詳しい使い方は、まとまっているブログがいくつもあるので
このあたりとかを見てもらえればいいとして、
filterの中のbrightnessという明度をコントロールする関数の挙動が
iOS6のsafariとiOS7のsafariでまったく違うという現象があった。
filterは、いまのところ、webkitのプレフィクスを付ける必要があり、
書き方としては以下のようになる。
pictureというclassのついた画像の明度をコントロールしたい場合
がもと(オリジナル)の状態。
にすると真っ黒になる。
明度が0ってこと。
100%を超えた数値をいれていけば明るくなっていって最後は真っ白になる。
(実験したところ2000%くらいで真っ白になった)
これはW3Cでも規定されている正しい挙動。
これがiOS6のsafariなどでみると以下のようになってしまう。
brightness(0%) → オリジナルの状態(明度の加工なし)
brightness(100%)→明度MAXで真っ白
brightness(-100%)→真っ黒
そのため、無加工のオリジナルを表示するつもりで
brightness(100%)を設定すると、iOS6のsafariでは、真っ白になってしまうっぽい。
今のところ解決策は見つかってない。
誰か知ってたら教えて。
(ちなみに今回は、brightnessを使わないで画像そのものを差し替える、という方法で解決させました)
W3Cでは現在wokingdraft状態のもの。
詳しい使い方は、まとまっているブログがいくつもあるので
このあたりとかを見てもらえればいいとして、
filterの中のbrightnessという明度をコントロールする関数の挙動が
iOS6のsafariとiOS7のsafariでまったく違うという現象があった。
filterは、いまのところ、webkitのプレフィクスを付ける必要があり、
書き方としては以下のようになる。
img.picture{
-webkit-filter:brightness(100%);
}
pictureというclassのついた画像の明度をコントロールしたい場合
-webkit-filter:brightness(100%);
がもと(オリジナル)の状態。
-webkit-filter:brightness(0%);
にすると真っ黒になる。
明度が0ってこと。
100%を超えた数値をいれていけば明るくなっていって最後は真っ白になる。
(実験したところ2000%くらいで真っ白になった)
これはW3Cでも規定されている正しい挙動。
これがiOS6のsafariなどでみると以下のようになってしまう。
brightness(0%) → オリジナルの状態(明度の加工なし)
brightness(100%)→明度MAXで真っ白
brightness(-100%)→真っ黒
そのため、無加工のオリジナルを表示するつもりで
brightness(100%)を設定すると、iOS6のsafariでは、真っ白になってしまうっぽい。
今のところ解決策は見つかってない。
誰か知ってたら教えて。
(ちなみに今回は、brightnessを使わないで画像そのものを差し替える、という方法で解決させました)