0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Safariにて、要素の面積が一定値を超えると-webkit-backdrop-filterが効かなくなるらしい

Posted at

気づいたきっかけ

私が趣味で運営しているホームページで、趣味で書いた5万字程度の文章を1ページに掲載したら、そのページだけ-webkit-backdrop-filter: blurによる背景のブラーが適用されないという不具合が生じた。その場で少し調べてみると、どうやらSafariのみに見られる不具合で、ブラーをかけている要素のheightが関係しているらしいということが分かった。けれどそれ以上のことが分からなかったため、一旦運用でカバー(文章を分割して掲載)することにした。

-webkit-backdrop-filterの仕様

結論から書くと、要素の面積が27,423,000px程度を超えると、-webkit-backdrop-filterが効かなくなるらしい。ちなみにFirefoxでは面積関係なく適用された
私のホームページでは、max-widthを1080pxとしたwrapperに背景ブラーをかけてる感じで、width1080pxの状態で検証していくと、heightが25392pxの時まではブラーがかかり、25393pxからはかからなくなると分かった。

この時、ブラーが適用されるの面積の上限は、
25392px(height) * 1080px(width) = 27,423,360pxとなる

ただこれだけだと面積によるものかどうかはまだ分からないので、適当にwidthを1000pxとして再度検証。
するとやはり、
27,423,000px(面積)/1000px(width)
の計算結果として得られる27,423pxが、ブラーが適用されるheightの上限となった。
CleanShot 2024-12-24 at 19.16.45@2x.png

CleanShot 2024-12-24 at 19.18.32@2x.png

width500pxなどで試しても同様の検証結果が得られ、また-webkit-backdrop-filter: blurのみならず、-webkit-backdrop-filter: invertや-webkit-backdrop-filter: contrastでも同様だったため、-webkit-backdrop-filterに、要素の面積が27,423,000px程度(特定は面倒なので興味のある方がやってください)を超えると無効になるという仕様があると言うことができそうである。

他のベンダープレフィックスはどうなの?

全部確かめたわけじゃないので断言はできないですが、今のところそういった現象を確認できたのは-webkit-backdrop-filterだけでした。

おわりに

そういうものだと言うことだけは分かりましたが、ホームページに長文を掲載できないという課題の解決策は結局分からずじまい。まあ運用でカバーすればいいと言う話ではあるのですが、何かいい方法をご存じの方はコメントにてご教示いただけますとめっちゃ助かります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?