0

I'm struggling with a difference between WebKit and Firefox: If one div (B) is nested in another (A) (both having CSS position absolute) but B is geometrically outside A. Desired look is what both WebKit and IExplorer do: 

|---------------|           Desired !! (Webkit,IExplorer)
|A              |
|               |
|            |--|------|
|            |B |      | 
|            |  |      | 
|            |--|------|
|               |
|---------------|

i.e. Chrome: shows B outside A, both have the expected border size

but Firefox: enlarges the border of A to go around.

|-----------------------|      Firefox,  why ... ???
|A                      |
|                       |
|            |---------||
|            |B        || 
|            |         || 
|            |---------||
|                       |
|-----------------------|

How can I force Firefox to behave like Chrome/Safari(and IExplorer) ? Take a look at https://jsfiddle.net/r29knz8z/4/

Is this a Firefox bug ?

sebhaase
  • 564
  • 1
  • 6
  • 10
  • ref. http://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko – sebhaase Feb 13 '16 at 10:20

1 Answers1

1

The problem in your case seems to be the CSS property outline. If you remove it and mark your boxes some other way (border, background-color or something like that), your example is displayed correctly in Firefox as well.

According to this article, though it's a few years old, Firefox has its problems with outline. So it might be a good idea to look into replacing it in your code.

Henning Kockerbeck
  • 742
  • 7
  • 15
  • Thanks. That is really annoying that is not fixed for more that 3 years !! Is there at least a bug report for it ? Anyway http://jsfiddle.net/r29knz8z/6/ is quite close to identical - I think there is a sub pixel offset to the original ..... (http://jsfiddle.net/r29knz8z/5 is worse - without margin:-1px) – sebhaase Apr 25 '15 at 14:12
  • There actually is a [bug report](https://bugzilla.mozilla.org/show_bug.cgi?id=687311), but there's a discussion if it's really a bug or if it's in fact Webkit and IE that deviate from the standard: "The 'outline' property is designed to render focus outlines; it should behave as an indication of focus ought to behave. Any other use cases are purely secondary and should only be considered in so far as they do not interfere with drawing optimal focus outlines." (David Baron in the bug reports comments). Your usage of `outline` as some kind of `border` replacement might not be the intended way. – Henning Kockerbeck Apr 25 '15 at 14:55