Closed Bug 1715888 Opened 5 months ago Closed 4 months ago

Box-shadow has a strange angled gap on multi-line elements

Categories

(Core :: Layout: Text and Fonts, defect)

Firefox 90
defect

Tracking

()

RESOLVED DUPLICATE of bug 1061094

People

(Reporter: krinklemail, Unassigned)

References

Details

Attachments

(1 file)

Attached image cross-browser.png
<style>
a {
	background: rgba(28, 135, 242, 0.2);
	box-shadow: 0px 0px 0px 15px rgba(28, 135, 242, 0.2);
}
</style>
<p>Some text and a <a href="#">link over multiple</a> lines, when wrapping at the right width.</p>

Isolated test case: https://codepen.io/Krinkle/pen/dyvqaNG
Real example: https://timotijhof.net/posts/2019/protect-yourself-from-npm/#i-get-it-now-what-can-we-do-aboutit

Tested browsers:

  • Firefox 89 stable on macOS: Box shadow has a strange cut-out in its rectangle.
  • Safari 14.1 on macOS: Fine.
  • Chrome 91 on macOS: Fine.
  • Firefox 90 beta on Windows 7: Same bug as on macOS.

Might be related to, but didn't feel confident enough to merge or report there:

Timo, thanks for the report.

There are two separate issues here.

First, Chromium and Safari's rendering is wrong. I believe Firefox's behavior is correct per https://bugzilla.mozilla.org/show_bug.cgi?id=1061094#c3. If you want to Chromium's behavior on Firefox, you can add box-decoration-break: clone; to the element with box-shadow. Chromium bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=682173

Second, Firefox's rendering actually is regressed with webrender enabled. Hence the strange cut-out in your example. I've filed bug 1716903 using the example on MDN's, which is easier to visualize the problem.

Status: NEW → RESOLVED
Closed: 4 months ago
Resolution: --- → DUPLICATE
See Also: → 1716903
Duplicate of bug: 1061094
You need to log in before you can comment on or make changes to this bug.