[webkit-dev] New focus outline enhancement 7138 - outline broken

[Johan Lund]

I need some advice on this one.
The new feature added to webkit in bug nr #7138 is a great new  
addition. I did however encounter some problems (probably not a bug  
though).

If you put two divs next to each other and put tab order on them they  
will get the blue default outline.
When you tab between them you will notice that the outline is broken  
and rendered underneath one of the divs.
It seems that the div that was added last or with the highest z-index  
will have its outline rendered on top of the first div.

This is the exact same behavior as in firefox and I have heard that  
some people use outlines to debug their layouts so this might be the  
intended behavior. IE however works completely different. It does not  
have the outline property and it's focus rectangle is not drawn on the  
outside, but inside the component so the "outline" is never broken in  
IE.

The only way I have come up with to solve this is to add margin to my  
components. Then the outline will lie inside the margin and will never  
be broken. The problem is that adding margin causes a mess in my  
situation.

Is there any other solution to getting the outline to not be cut off?  
Is there any way to make it render on top of everything or perhaps  
offset it so it renders inside, like in IE? Anyone have any guidance  
regarding this?

/Johan