Does WebKit have a clipping bug?

后端 未结 2 1228
终归单人心
终归单人心 2021-02-12 14:49

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

2条回答
  •  南旧
    南旧 (楼主)
    2021-02-12 15:45

    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.

    Safari vs Firefox descender sans-serif/arial

    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 
             
         
         
          

    descender issue

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

提交回复
热议问题