sikaku

iOSでのCSS,blur関数最小値について

iOS,iPadOSだとfilterプロパティなんかのblur()関数使用時の最小値は0を除くと1pxだったんだねって話です。

前書き

スクショ_iPad

iPadからCSSとHTMLでチョコ作成を確認していたのですが、表示がこの有様でした。

すっごいボケてる。下の「ほぼ誤差レベル」がギャグにしか見えない。

ぼかしの指定がfilter:blur(0.3px)なのですが、目算1pxはボケています。

確認ブラウザがsafariだったので、別ブラウザ(firefox,chrome)も試しましたが表示は変わらず。おそらくOS側の仕様じゃないかなーと推察。 iphoneでも同様。macは未所持の為確認できず。

調べても特に情報が出なかったので備忘録として残しておきます。

スクショ_android

ちなみに自前泥での表示はブラウザ差異なくこれでした。windowsも概ね同様。

検証

前提確認

スクショ_iPad
スクショ_android

上記スクリーンショットは同指定内容を確認したipad,androidのもの。

指定詳細

左から

filter: blur(0);

filter: blur(0.3px);

filter: blur(0.6px);

filter: blur(1px);

androidで差が視認できるのに対し、ipadでは0.3px-1px間で差異が見受けられない。

この段階で考えられるiOS系のblur()関数の仕様が下記いずれかとなる。

  • 小数点以下の指定が無効
  • px指定時のみ小数点以下の指定が無効
  • 1以下の小数での指定が無効
  • 特定値以下のぼかし不可

ちなみに前述したが、結論を先んじて述べると特定値以下のぼかし不可が該当する。

実検証

px単位使用時の小数の有効性証明
スクショ_iPad_1px-2px指定
  • px単位使用時の小数の有効性証明の為、1px2px間での比較
  • 各指定毎に描画が異なるのが見てとれる為、下記二点は異なると証明できる。
    • 小数点以下の指定が無効
    • px指定時のみ小数点以下の指定が無効
指定詳細

左から

filter: blur(1px);

filter: blur(1.3px);

filter: blur(1.6px);

filter: blur(2px);

1以下小数の有効性証明
スクショ_iPad_0-1em指定
  • 文字サイズ基準のemでの数値指定(検証時の文字サイズ10px)
  • 各指定毎に描画が異なるのが見てとれる為、下記一点は異なると証明できる。
    • 1以下の小数での指定が無効
指定詳細

左から

filter: blur(0);

filter: blur(0.3em);(実質3px)

filter: blur(0.6em);(実質6px)

filter: blur(1em);(実質10px)

px以外の単位で1px以下の描画可能か検証
スクショ_iPad_0-0.1em指定
  • 文字サイズ基準のemでの数値指定(検証時の文字サイズ10px)
  • 0以外の差異が見てとれず、0.1em(実質1px)と同描画となっていると見受けられる。
  • 上記検証含め、この時点で下記が仕様に該当するのではないかと推察される
    • 特定値以下のぼかし不可
  • しかし、これも今指定使用の小数第二位無効という可能性がある為次の検証をする。
指定詳細

左から

filter: blur(0);

filter: blur(0.03em);(実質0.3px)

filter: blur(0.06em);(実質0.6px)

filter: blur(0.1em);(実質1px)

em単位指定時の小数第二位有効性証明
スクショ_iPad_0-0.1em_1em=50px指定
  • 基準となる文字サイズを50pxに変更したうえでの上記と同指定の検証
  • こちらでは各指定毎に明確に描画が異なるのが見て取れる為、小数第二位の指定自体は有効と証明できる
指定詳細

左から

filter: blur(0);

filter: blur(0.03em);(実質1.5px)

filter: blur(0.06em);(実質3px)

filter: blur(0.1em);(実質5px)

おまけ

calc関数を併用してみる
スクショ_iPad_calc関数使用
  • calc()関数使えばワンチャンないかなーと思ったが、当然のようにチャンスなど無い。
指定詳細

左から

filter: blur(0);

filter: blur(calc( 1px / 3 ));(実質0.333...px)

filter: blur(calc( 2px / 3 ));(実質0.666...px)

filter: blur(clac( 3px / 3 ));(実質1px)

scale関数を利用してみる
スクショ_iPad_scale関数使用
  • 幅高さ、ボーダー幅文字サイズ諸々、ぼかし範囲も含め全サイズ10倍数値を指定した上で、transform:scale(0.1,0.1);で縮小表示
  • 0.3px等指定時のandroidと遜色ない表示。
  • 最小値が決まってる系はこの手に限る。（面倒だからやりたくはない）
指定詳細

左から

filter: blur(0);

filter: blur(3px);(実質0.3px)

filter: blur(6px);(実質0.6px)

filter: blur(10px);(実質1px)

他利用での1px以下小数

iOS系でも、他での利用だと1px以下の小数指定でしっかり描画してくれるんですよね。

左のスクショ

赤：width: 0.5px;

青：width: 1px;

※すごく拡大した上でのスクショです

検証用ページについて

検証用ページ

  • 表示の統一性を出す為大き目のサイズ構成にしています。そのためスマホからは横スクロールがでると思います。
  • iOSでの表示確認が主目的の為、ベンダープレフィックスはつけていません。(ものぐさでごめんなさい)

ソースコード

HTML
  1. <ul id="demolist">
  2. <li id="demo0">
  3. <span></span><span></span><span></span><span></span>
  4. </li>
  5. <li id="demo1">
  6. <span></span><span></span><span></span><span></span>
  7. </li>
  8. <li id="demo2">
  9. <span></span><span></span><span></span><span></span>
  10. </li>
  11. <li id="demo3">
  12. <span></span><span></span><span></span><span></span>
  13. </li>
  14. <li id="demo4">
  15. <span></span><span></span><span></span><span></span>
  16. </li>
  17. <li id="demo5">
  18. <span></span><span></span><span></span><span></span>
  19. </li>
  20. <li id="demo6">
  21. <span></span><span></span><span></span><span></span>
  22. </li>
  23. </ul>
CSS
  1. @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
  3. * ,*::before ,*::after {
  4. box-sizing: border-box;
  5. margin: 0;
  6. padding: 0;
  7. }
  9. body {
  10. min-width: 0;
  11. text-align: center;
  12. font-size: 12px;
  13. font-family: 'Source Code Pro',monospace;
  14. }
  16. #demolist {
  17. display: inline-block;
  18. width: 520px;
  19. margin: 0 auto;
  20. padding: 0 20px;
  21. list-style-type: none;
  22. }
  24. #demolist > li {
  25. display: flex;
  26. justify-content: space-between;
  27. margin: 25px 0;
  28. }
  29. #demolist span {
  30. position: relative;
  31. width: 23%;
  32. }
  33. #demolist span::before {
  34. content: 'text';
  35. display: block;
  36. padding: calc( 50% - 5px ) 0;
  37. border: solid 5px blue;
  38. font-size: 10px;
  39. line-height: 0;
  40. }
  42. #demo0 span:nth-of-type(1)::before { filter:blur(0)}
  43. #demo0 span:nth-of-type(1)::after { content: '0'}
  44. #demo0 span:nth-of-type(2)::before { filter:blur(0.3px)}
  45. #demo0 span:nth-of-type(2)::after { content: '0.3px'}
  46. #demo0 span:nth-of-type(3)::before { filter:blur(0.6px)}
  47. #demo0 span:nth-of-type(3)::after { content: '0.6px'}
  48. #demo0 span:nth-of-type(4)::before { filter:blur(1px)}
  49. #demo0 span:nth-of-type(4)::after { content: '1px'}
  52. #demo1 span:nth-of-type(1)::before { filter:blur(1px)}
  53. #demo1 span:nth-of-type(1)::after { content: '1px'}
  54. #demo1 span:nth-of-type(2)::before { filter:blur(1.3px)}
  55. #demo1 span:nth-of-type(2)::after { content: '1.3px'}
  56. #demo1 span:nth-of-type(3)::before { filter:blur(1.6px)}
  57. #demo1 span:nth-of-type(3)::after { content: '1.6px'}
  58. #demo1 span:nth-of-type(4)::before { filter:blur(2px)}
  59. #demo1 span:nth-of-type(4)::after { content: '2px'}
  62. #demo2 span:nth-of-type(1)::before { filter:blur(0)}
  63. #demo2 span:nth-of-type(1)::after { content: '0'}
  64. #demo2 span:nth-of-type(2)::before { filter:blur(0.3em)}
  65. #demo2 span:nth-of-type(2)::after { content: '0.3em'}
  66. #demo2 span:nth-of-type(3)::before { filter:blur(0.6em)}
  67. #demo2 span:nth-of-type(3)::after { content: '0.6em'}
  68. #demo2 span:nth-of-type(4)::before { filter:blur(1em)}
  69. #demo2 span:nth-of-type(4)::after { content: '1em'}
  72. #demo3 span:nth-of-type(1)::before { filter:blur(0)}
  73. #demo3 span:nth-of-type(1)::after { content: '0'}
  74. #demo3 span:nth-of-type(2)::before { filter:blur(0.03em)}
  75. #demo3 span:nth-of-type(2)::after { content: '0.03em'}
  76. #demo3 span:nth-of-type(3)::before { filter:blur(0.06em)}
  77. #demo3 span:nth-of-type(3)::after { content: '0.06em'}
  78. #demo3 span:nth-of-type(4)::before { filter:blur(0.1em)}
  79. #demo3 span:nth-of-type(4)::after { content: '0.1em'}
  82. #demo4 span::before {
  83. font-size: 50px;
  84. letter-spacing: -0.2em;
  85. }
  86. #demo4 span:first-letter {
  87. margin-left: -0.2em;
  88. }
  89. #demo4 span:nth-of-type(1)::before { filter:blur(0)}
  90. #demo4 span:nth-of-type(1)::after { content: '0'}
  91. #demo4 span:nth-of-type(2)::before { filter:blur(0.03em)}
  92. #demo4 span:nth-of-type(2)::after { content: '0.03em'}
  93. #demo4 span:nth-of-type(3)::before { filter:blur(0.06em)}
  94. #demo4 span:nth-of-type(3)::after { content: '0.06em'}
  95. #demo4 span:nth-of-type(4)::before { filter:blur(0.1em)}
  96. #demo4 span:nth-of-type(4)::after { content: '0.1em'}
  99. #demo5 span:nth-of-type(1)::before { filter:blur(0)}
  100. #demo5 span:nth-of-type(1)::after { content: '0'}
  101. #demo5 span:nth-of-type(2)::before { filter:blur(calc(1px / 3))}
  102. #demo5 span:nth-of-type(2)::after { content: 'calc(1px / 3)'}
  103. #demo5 span:nth-of-type(3)::before { filter:blur(calc(2px / 3))}
  104. #demo5 span:nth-of-type(3)::after { content: 'calc(2px / 3)'}
  105. #demo5 span:nth-of-type(4)::before { filter:blur(calc(3px / 3))}
  106. #demo5 span:nth-of-type(4)::after { content: 'calc(3px / 3)'}
  109. #demo6 span::before {
  110. position: absolute;
  111. top: 0; left: 0;
  112. width: 1000%;
  113. padding: calc( 500% - 50px ) 0;
  114. border-width: 50px;
  115. font-size: 100px;
  116. transform: scale(0.1,0.1);
  117. transform-origin: top left;
  118. }
  119. #demo6 span::after {
  120. display: block;
  121. padding-top: 100%;
  122. }
  123. #demo6 span:nth-of-type(1)::before { filter:blur(0)}
  124. #demo6 span:nth-of-type(1)::after { content: '0'}
  125. #demo6 span:nth-of-type(2)::before { filter:blur(3px)}
  126. #demo6 span:nth-of-type(2)::after { content: '3px'}
  127. #demo6 span:nth-of-type(3)::before { filter:blur(6px)}
  128. #demo6 span:nth-of-type(3)::after { content: '6px'}
  129. #demo6 span:nth-of-type(4)::before { filter:blur(10px)}
  130. #demo6 span:nth-of-type(4)::after { content: '10px'}