Focus ring on textarea clipped when hovering over button




11 years ago
8 years ago


(Reporter: kinetik, Unassigned)


Mac OS X

Firefox Tracking Flags

(Not tracked)



(3 attachments)



11 years ago
1. Open attached testcase
2. Click textarea so it has focus
3. Hover over "Foo" button

It looks like we're redrawing the button (including background) over the top of where the focus ring has been drawn.  Noticed this on the comment submit form at

This is new since the fix for bug #415466 (enable focus rings on textboxes and textareas) went in.

Comment 1

11 years ago
Created attachment 302738 [details]

Comment 2

11 years ago
Either the button's overflow area is painting white when there is no focus ring (not likely) or the area under the button's overflow area is getting clipped when the text field is getting redrawn with a focus ring (likely).
Isn't the most likely issue that the text field's overflow area does not include its focus ring?

Comment 4

11 years ago
I'm not sure what you mean - this bug (at least what I'm seeing) happens when you have focus in the text field and it is drawing the focus ring into its overflow. Text areas have an overflow of 4 like everything else that draws a focus ring.
I see part of the text area's focus ring being overdrawn when I hover the button. When I hover the text area again, its focus ring redraws again correctly. This makes me suspect that the button is repainting and for whatever reason we're failing to repaint the text area and its focus ring ... this would happen if the text area's overflow area was not set correctly.

Comment 6

11 years ago
Bug 417124 might be a dup.

Comment 7

11 years ago
Fwiw, you can see the same issue on

1) Focus the "Detailed comments" textarea
2) Move the mouse upwards, over the input field above the textarea

--> focusring gets clipped


11 years ago
Blocks: 415466

Comment 8

11 years ago
I can't really tell what's wrong, but I have some observations that I like to share:

1) Setting MAX_FOCUS_RING_WIDTH to 5 (instead of 4) seems to fix the issue

    if (eventState & NS_EVENT_STATE_FOCUS) {
        // We need to bring the rectangle in by 1 pixel on each side.
        CGRect cgr = CGRectMake(macRect.origin.x + 1,
                                macRect.origin.y + 1,
                                macRect.size.width - 2,
                                macRect.size.height - 2);
        HIThemeDrawFocusRect(&cgr, true, cgContext, kHIThemeOrientationNormal);

Using the macRect instead of the cgr seems to fix the issue (but then the focusrect draws outside, of course)

3) If I "enable" focus rings on native listboxes and use NS_THEME_LISTBOX instead of NS_THEME_TEXTFIELD_MULTILINE it also seems to work. The listbox-styled textarea appears to have the same look as a multiline textfield and you also get a disabled/readonly textarea. I haven't really tested that much, though. And focus rings on multiple selects look terrible.

Comment 9

11 years ago
Created attachment 305112 [details]
html testcase

This is what I've used when I tested.

Comment 10

11 years ago
Created attachment 305114 [details] [diff] [review]
demo patch

This is just a demo - using same background as for listboxes. I now see that using this patch with the testcase in attachment #302738 [details] makes the button focus ring clip instead. That is, focus the button - then hover the textarea --> button focus ring gets clipped.
Stefan, you have attached a patch to this bug, but never asked for review. I'll do that now. Just to push it a bit forward...
Comment on attachment 305114 [details] [diff] [review]
demo patch

Roc, what's your opinion of this patch?
Attachment #305114 - Flags: review?(roc)
See also bug 416755, which I think is the inverse of this bug (or a layout bug).  

(We have a whole class of focus ring bugs covering most form widgets; search for "focus ring" in summaries in Widget:Cocoa to find them.)

Comment 14

10 years ago
Comment on attachment 305114 [details] [diff] [review]
demo patch

Please, this is really not anything that you should bother roc with... iirc this had lots of issues.
Attachment #305114 - Flags: review?(roc)


10 years ago
Duplicate of this bug: 487665


10 years ago
Assignee: joshmoz → nobody
Duplicate of this bug: 631586
You need to log in before you can comment on or make changes to this bug.