Does WebKit have a clipping bug?

Question

Given a region where the line-height and any margins are n, and the region has a height that is a multiple of n, and the scrollTop is increased by mult

Answer 1

It appears this has to do with descenders (qjpg) "sticking out" down below the line-height box. Firefox and Safari seem to agree on how to do this - characters are allowed to stick out. However by exaggerating the sizes x 10, we notice something interesting for sans-serif.

In Mac OS X, both Safari and Firefox chose helvetica as the typeface for sans-serif. But Firefox moves that particular typeface upwards in the line-height box, so the bottom doesn't "stick out". Compare with arial - microsoft's bastardization of helvetica where both browsers let it stick out.

I think the solution to your problem is to find a "reasonable" negative margin to offset the content upwards. It seems both helvetica and arial have some "wiggle room" at the top of the box. I would use #wrapper #content { margin-top: -1px; } (selector extra strong to overcome #wrapper *) for the specific font-size/line-height in your example.

Here's my test code. It shows that the "sticking out" can be much worse for geneva and verdana.

 
 
     
         
         
         
     
     
      
descender issue
 
      sans-serif
        
 
          lfgjpq
        
 
      arial
        
 
          lfgjpq
        
 
      geneva
        
 
          lfgjpq
        
 
      helvetica
        
 
          lfgjpq
        
 
      trebuchet ms
        
 
          lfgjpq
        
 
      verdana
        
 
          lfgjpq
        
 
      serif
        
 
          lfgjpq
        
 
      times
        
 
          lfgjpq