non-native form fields' focus-outlines are in overflow area (and get clipped if the widget is right at the edge of an iframe or overflow:hidden element).
Categories
(Core :: Widget, defect, P3)
Tracking
()
People
(Reporter: dholbert, Unassigned)
References
Details
(Whiteboard: [not-a-fission-bug])
Attachments
(4 files)
screenshot of bug at MDN
STR:
- Ensure you have
widget.non-native-theme.enabledset to true in about:config. - View attached testcase, which is just:
data:text/html,<!DOCTYPE html><div style="overflow:hidden; height: 100px"><input autofocus>
- If the input field isn't already focused (it should be), then click it to focus it.
ACTUAL RESULTS: There's a focus ring around the textfield, which is entirely clipped on the top and the left. So you just see a backwards-L-shaped "halo" around the field (with an outline on the right side and bottom side).
EXPECTED RESULTS: Consistent-looking appearance of focus styling.
I actually ran into this on MDN, which runs into this with an iframe rather than an overflow:hidden div. The page I encountered it there was https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation , with the "ZIP"/"Country" example about halfway down the page. If you focus the "ZIP" formfield, you'll run into this issue.
|
Reporter | |
Comment 1•4 years ago
|
||
|
|
Reporter | |
Comment 2•4 years ago
|
||
|
|
Reporter | |
Comment 3•4 years ago
|
||
(This might be a dupe -- I feel like I've seen this issue discussed somewhere -- but I couldn't immediately find an existing bug, so I went ahead and filed.)
|
||
Comment 4•4 years ago
|
||
That's how outlines work, isn't it? We could make the outline smaller, but other than that this is wontfix I fear.
|
|
||
Comment 5•4 years ago
|
||
(Or maybe paint the outline 1px more into the field / button / etc)
|
|
Reporter | |
Comment 6•4 years ago
|
||
Right, this is how outlines work... It's a question of how we want to use outlines for these widgets, really.
Thanks for the Safari screenshot - I hadn't realized they had widgets whose focus indicators were similarly susceptible to clipping. Maybe that means this will be reasonably web-compatible and this is wontfix, then.
|
||
Updated•4 years ago
|
|
|
||
Comment 7•4 years ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #6)
Thanks for the Safari screenshot - I hadn't realized they had widgets whose focus indicators were similarly susceptible to clipping. Maybe that means this will be reasonably web-compatible and this is wontfix, then.
Adding [not-a-fission-bug] whiteboard tag because this bug doesn't need to block Fission MVP.
TBD whether this bug should be fixed or wontfixed.
|
|
||
Comment 8•4 years ago
|
||
I think this is Wontfix, but let me know if you disagree. Maybe the example in mdn deserves a fix?
|
|
Reporter | |
Comment 9•4 years ago
|
||
Yeah, that's fine. I don't immediately know how to edit demo-content on MDN, but it's not severe enough for me to worry too much about it.
Description
•