Affected versions

• 67.0b9
• 68.0a1(2019-04-10)
• 66.0.3

Affected platforms

• Windows 10x64
• macOS 10.14
• Ubuntu 16.04

Steps to reproduce

1. Launch FF.
2. Go to the Firefox Account icon near the burger menu.
3. Click on Turn on Sync...
4. Using Tab, reach the Privacy Notice option.

Expected result

• The Privacy Notice option is properly highlighted.

Actual result

• The privacy Notice option is only partially highlighted.

Regression range
*Will return with regression range ASAP.

This is inside the Firefox accounts webpage right? (Not super obvious from the screenshot)

If so, this likely isn't the best place for this bug, and it isn't a regression inside Firefox. Vijay, do you know where this code (and issues in it) live(s)?

Hello,

Yes , this is inside the Firefox Sync login page.
I can change it to the desired location, if this is not the proper one for this bug.

Hey Vlad,

Yea this is a FxA web issue and not related to the toolbar item. We usually track our web issues at https://github.com/mozilla/fxa. I am in favor of closing this here and opening the issue at the github repo.

I think that this seems box-shadow implementation problem.

This seems a lot like a Firefox rendering bug rather than an FxA bug to me.

(In reply to Shane Tomlinson [:stomlinson] from comment #7)

This seems a lot like a Firefox rendering bug rather than an FxA bug to me.

FWIW, my assumption was that the FxA website is trying to make the text not wrap here - it's odd to have it wrap by half a word. I'll move this to layout in case people want to fix how box-shadow works on inline elements that get split up, but I'm also going to needinfo in case the fxa folks want to fix that part in a separate bug/issue.

Bugbug thinks this bug is a regression, but please revert this change in case of error.

I think this is the expected rendering given the markup btw. Outline works like borders, and adding a border to that link would result in a similar rendering.

But outline rendering interop is a mess generally.

Hey Gijs, I've created a bug to get UX input on what FxA should do with the link wrapping [1].

[1] - https://github.com/mozilla/fxa/issues/3743

The priority flag is not set for this bug.
:heycam, could you have a look please?

For more information, please visit auto_nag documentation.

Per comment 10, this is the expected rendering, so I think we should close this as "INVALID" as a Layout bug.

Also, FWIW, I couldn't make the link wrap mid-phrase on my local machine, at least not by resizing my window. The site snaps between two different sizes (using responsive design & media queries, presumably), and the whole "Privacy Notice" phrase is all on one line, in both of the renderings that I see. However, I was able to make it break by "cheating" :) and manually forcing a smaller width in devtools.

If this is still reproducible under some configuration (e.g. using different fonts than what I've got perhaps), then feel free to reopen, though in that case this should morph into a Firefox Accounts website bug, and they should probably look into ways of preventing the link from wrapping into such disjoint blocks (e.g. the site could use a non-breaking space, or use a web font with more predictable sizing).

But also, this feels pretty edge-casey and the styling doesn't look too bad in configurations where the issue does happen, so I'm not convinced it's worth worrying too much about unless it's really easy to trigger.

Here's a testcase to demonstrate how box-shadow vs. border vs. outlines are drawn around fragmented content.

As emilio noted, we treat box-shadow like border. Chrome is inconsistent with itself - they treat it like border when fragmenting in one axis vs. like outline when fragmenting in the other. (They draw all sides of the box-shadow box for inline-axis fragmentation, but leave it open for block-axis fragmentation.)