気づいたきっかけ
私が趣味で運営しているホームページで、趣味で書いた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の上限となった。
width500pxなどで試しても同様の検証結果が得られ、また-webkit-backdrop-filter: blurのみならず、-webkit-backdrop-filter: invertや-webkit-backdrop-filter: contrastでも同様だったため、-webkit-backdrop-filterに、要素の面積が27,423,000px程度(特定は面倒なので興味のある方がやってください)を超えると無効になるという仕様があると言うことができそうである。
他のベンダープレフィックスはどうなの?
全部確かめたわけじゃないので断言はできないですが、今のところそういった現象を確認できたのは-webkit-backdrop-filterだけでした。
おわりに
そういうものだと言うことだけは分かりましたが、ホームページに長文を掲載できないという課題の解決策は結局分からずじまい。まあ運用でカバーすればいいと言う話ではあるのですが、何かいい方法をご存じの方はコメントにてご教示いただけますとめっちゃ助かります。