Based on the https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty, it's not clear how backdrop-filter should apply to inline elements that are fragmented across multiple line boxes, and current browser behavior differs across implementations.
Safari does not appear to support backdrop-filter on inline elements at all. Chrome and Firefox both apply backdrop-filter to inline elements, but their behaviors diverge and neither seems ideal. In Chrome, the backdrop-filter is applied beyond the expected area for a fragmented inline element. In Firefox, the overlapping region is filtered separately for each line box.
This raises a question: when inline fragments overlap, should the overlapping region receive a single combined backdrop-filter effect, or should the effect be applied independently per line box?
Firefox:
Chrome:
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter for local inline offset with multiple lines</title>
<style>
body {
background: #CC8800;
}
div {
margin-bottom: 120px;
}
.inline-backdrop-filter {
backdrop-filter: invert(100%);
padding: 50px;
border: 1px solid blue;
display: inline;
}
</style>
<body>
<div>
<span class="inline-backdrop-filter">1</span>
</div>
<div>
AB<div class="inline-backdrop-filter">3</div>
</div>
<div>
AB <div class="inline-backdrop-filter"><br>line break</div>
</div>
</body>
Based on the https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty, it's not clear how backdrop-filter should apply to inline elements that are fragmented across multiple line boxes, and current browser behavior differs across implementations.
Safari does not appear to support backdrop-filter on inline elements at all. Chrome and Firefox both apply backdrop-filter to inline elements, but their behaviors diverge and neither seems ideal. In Chrome, the backdrop-filter is applied beyond the expected area for a fragmented inline element. In Firefox, the overlapping region is filtered separately for each line box.
This raises a question: when inline fragments overlap, should the overlapping region receive a single combined backdrop-filter effect, or should the effect be applied independently per line box?
Firefox:
Chrome: