[css, bug of specification] negative margins, painting order, stacking context.

As we know[1]  rendering of static children of elements happens in 
following order:

for all static children:
  step #1: draw backgrounds of these elements;
  step #2: draw content of these elements (text in particular);

This algorithm (strange, imo) works in most cases but plays
badly with negative margins.

Here is an example of very strange (non-intuitive if you wish) effect 
that can
be observed when negative margins are used:

<html>
<head>
  <style>
    div.red     {  width:100px;    height:100px;    
background-color:red;   margin-bottom:-100px;    }
    div.green  {  width:90px;      height:90px;      
background-color:green;    }
    div.red:hover { background-color:orange;  }
    div.green:hover { background-color:lime;  }
  </style>  
</head>
<body>
  <div class="red">This text has red background.</div>
  <div class="green"></div>
</body>
</html>

Problem here is that due to [1] these two elements have non-trivial 
overlaying structure.
Each point inside div.green participate in following layers:
 
1) background of  div.red
2) background of  div.green
3) content(text) of  div.red
4) content(text) of  div.green

This clearly produces logical errors in detection of div.red:hover and 
div.green:hover
conditions. Try to move mouse over and near the text.

That appears as a bug of the specification.  Non-intuitive, non-logical, 
etc.

Possible resolutions of the problem:

A) To change [1] so drawing of the element background and its content is 
atomic:

    For each static child draw its background and content(text) on top 
of it.
    (That  is how it is made in all UI systems I know)

If this change is not desirable at this point then plan "B":

B) Treat all elements having negative margins as a separate layer laying 
over
    normal static children of the element thus rendering will happen 
this way:

   step #1, for all static children *without* negative margins do:
      step #1.1: draw backgrounds of elements;
      step #1.2: draw content of elements (text in particular);
   step #2, for all static children *with* negative margins do:
      step #2.1: draw backgrounds of elements;
      step #2.2: draw content of elements (text in particular);

Mouse hover detection algorithms have to be updated accordingly. In both 
cases.

[1] http://www.w3.org/TR/CSS21/zindex.html

--
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 6 February 2009 19:40:21 UTC