Bug 16560 – Strange highlight drawn and misplaced clickable region when tabbing to tabs on blogs.s60.com

• Status: NEW
• Component: New Bugs

[David Kilzer (:ddkilzer)]

* SUMMARY
When tabbing to the tab UI elements on the page, a highlight rect is draw in the upper-left corner of the web page (in addition to the one around the tab UI).

* STEPS TO REPRODUCE
1. Launch Safari/WebKit.
2. Open URL:  http://blogs.s60.com/
3. Hit Tab key four times to highlight the "S60" tab UI.
4. Note location of highlighting.

* REGRESSION
Unknown.  Also occurs with Safari 3.0.4 (5523.10) with original WebKit on Mac OS X 10.5.1 (9B18).

* NOTES 
Will attach screenshot shortly.

[David Kilzer (:ddkilzer)]

Created attachment 18036 [details]
Screenshot

[David Kilzer (:ddkilzer)]

See Bug 16540 for an issue with the search field on this page.

[David Kilzer (:ddkilzer)]

I'm pretty sure this is a duplicate of another bug related to positioned <img> tags within an anchor (<a>) tag.  The example page was on a Dot Mac homepage.  I can't find the bug at the moment.

[David Kilzer (:ddkilzer)]

(In reply to comment #3)
> I'm pretty sure this is a duplicate of another bug related to positioned <img>
> tags within an anchor (<a>) tag.  The example page was on a Dot Mac homepage. 

Bug 13476.  I think the test case for this bug is slightly different, though.

[David Kilzer (:ddkilzer)]

Created attachment 18042 [details]
Test case

Reduced test case.

Tab into the page, and note the two highlight rects.  Also note that the "misplaced" highlight area is clickable!

[David Kilzer (:ddkilzer)]

(In reply to comment #4)
> Bug 13476.  I think the test case for this bug is slightly different, though.

The reduction for this bug uses "position: relative" while the reduction for Bug 13476 uses "position: absolute".

Note that the region for the <a> for this bug is clickable while the one for Bug 13476 is not.

The bugs are certainly related.

[David Kilzer (:ddkilzer)]

Another difference is that the "position: absolute" image does not draw a highlight border, but the "position: relative" image does have a highlight border.