- Ensure you have
widget.non-native-theme.enabled set 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.