Category : iPhone

背景色を敷いた要素に border-radius を指定すると何かはみでる件

Category
Bookmark


ロケタッチのシールページの角丸部分が変だったんですが、vantさんのブクマから解決方法が見つかりました。

Sneak ― Fixing the background 'bleed'

コードはこんな感じ。

div {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件

Category
Bookmark

フォームボタンにbackground-colorプロパティを指定すると、iPhone Safariではなぜかグラデーションがかかり、更に色が薄くなります。

デフォルトの状態


こんな感じですね。

background-colorで背景色を指定した状態

#sample {
  -webkit-border-radius: 4px;
  background-color: rgb(1,47,145);
}

<input type="submit" value="Submit" id="sample" />

こうすると、


グラデがかかり、色も薄くなってしまっています。

単色のgradientで指定する

これを解決するには、一色のみを指定したgradientを使用します。

#sample {
  -webkit-border-radius: 4px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(1,47,145)));
}

<input type="submit" value="Submit" id="sample" />


単色になりました。


ちなみに、なぜかpaddingも減ってるように見えます。

サンプルファイル