157293 2016-05-02 19:10:40 -0700 Element with "font-size: 0; overflow: hidden;" is not fitted to the parent. 2016-06-08 11:44:12 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 9 Unspecified Unspecified RESOLVED INVALID P2 Normal --- 1 enmi.lee webkit-unassigned mackyle mmaxfield simon.fraser oldest_to_newest 1189627 0 277960 enmi.lee 2016-05-02 19:10:40 -0700 Created attachment 277960 simple test page Element with "font-size: 0" is layout with top margin in the many browsers (ie, chrome, safari, firefox..), and front-end developer can remove top margin by adding that element to the "overflow: hidden" element, but it is not efficacious only in the safari browser. chrome and safari results and test html are attached. 1189628 1 277961 enmi.lee 2016-05-02 19:11:21 -0700 Created attachment 277961 result image 1189788 2 278007 mmaxfield 2016-05-03 10:07:51 -0700 Created attachment 278007 Slightly more reduced test case 1189794 3 mmaxfield 2016-05-03 10:36:11 -0700 The slightly more reduced test case is invalid - it renders the same in other browsers as in Safari. 1189808 4 mmaxfield 2016-05-03 11:31:17 -0700 Let me explain what is going on here. There are two pieces of information which are important here: 1. The CSS 2.1 spec [1] says: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.” Other browsers implement this behavior described above. 2. When placing inline elements inside a block element, we first calculate where the baseline of the entire line of inline elements should be (which is equal to the maximum ascent of all the elements in the line). Then, we calculate where the baseline of each inline element is, and we place all the baselines vertically on top of each other. ----------------------------------- So, let's break it down: we have three divs. The outer one (#header) has a height of 45px, and a width of 100%. It doesn't have a font-family or font-size specified, so it defaults to 16px Times. This font (16px Times) has an ascent of 14px and a descent of 4px. Inside, we have #wrapper, which is display: inline-block, and has overflow: hidden. Therefore, according to the spec, and because #wrapper has overflow: hidden, the baseline of #wrapper is its bottom margin edge. Because #wrapper is the only thing inside #header, the baseline for the first line of #header is therefore calculated to be at the bottom margin edge of #wrapper (which is 45px downward from the top). Therefore, when we align the baselines, the entire #wrapper is sitting on top of the baseline. (An interesting side effect of this is that the first line of #header still has a 4px descent (below the baseline) because of that 16px Times font used. However, you don't see it in the example because the height of #header is explicitly set to 45px. Therefore, if there were any text inside #header, you would see the bottoms of the letters drop down below #wrapper) Okay, so now let's consider #icon. This is an inline-block element without overflow: hidden, which means, according to the spec, its baseline is the baseline of its last line box. Its last line box comes from that "A" character inside it. That "A" character, however, has a font-size of 0px, which means that it lies all the way in the top left corner of #icon (but it's so small you don't see it). Therefore, the baseline of #icon lies at its very top. The last piece remaining is how #icon gets placed within #wrapper. This placement follows the same logic as before - we line up the baseline of the first line of #wrapper with the baseline of #icon. We know that the baseline of #icon is at its very top. Because the font-size of #wrapper is 0px, and its only content is #icon, so the first line of #wrapper has a baseline at its very top. Placing these two baselines on top of each other makes #icon appear at the very top of #wrapper. So, when all of this is done, the baseline of the first line of #header is at 45px (downward from the top); the baseline of the first line of #wrapper is at 0px from the top, and the baseline of the first line of #icon is at 0px from the top. That is how the spec describes this, and that is what the other browsers do. ----------------------------------- WebKit purposely does not implement the spec (as it appears above). We believe that putting overflow: hidden on #wrapper should not put its baseline at its bottom edge. Instead, we believe that a better behavior is to put #wrapper's baseline at the baseline of its last line box (which would come from the baseline of #icon, which is at 0px from its top). In this situation, almost all of the above discussion is still valid. However, because we place #wrapper's baseline 0px from its top, this means that the baseline of the first line of #header is now at 14px (which is the ascent of the 16px Times font used inside it). Then, we align this baseline with the baseline of #wrapper (which is at its top edge), which leads to the 14px gap you saw in your screenshot. This is rendering as we expect. ----------------------------------- You are right, however, that there is a difference in rendering between other browsers and WebKit. Interoperability is definitely one of WebKit's goals. However, we feel strongly enough about this new baseline placement behavior that we (I) have petitioned successfully to have the spec changed. You can read more about it at [2], and you can see that the proposal was accepted at [3]. Therefore, other browsers will adopt this behavior in the future (hopefully soon!). ----------------------------------- There are a few ways to adapt to this content to the new inline-block placement scheme. The most straightforward one is to style #header with font-size: 0px. Another one is to style #header with position: relative and style #wrapper with position: absolute. Another one is to use flexbox. Another one is to remove the font-size: 0px from all the divs, and wrap the "A" in a span and style the span with font-size: 0px. Or, you could use the same approach and style the span with display: none. [1] http://www.w3.org/TR/CSS21/visudet.html#leading [2] https://lists.w3.org/Archives/Public/www-style/2015Mar/0342.html [3] https://lists.w3.org/Archives/Public/www-style/2015Apr/0144.html 1200520 5 mmaxfield 2016-06-08 11:44:12 -0700 *** Bug 36084 has been marked as a duplicate of this bug. *** 277960 2016-05-02 19:10:40 -0700 2016-05-02 19:10:40 -0700 simple test page overflow-hidden-font-size-0.html text/html 498 enmi.lee PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1U eXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9VVRGLTgiIC8+CjxzdHlsZT4KI2hlYWRl ciB7CgloZWlnaHQ6IDQ1cHg7Cgl3aWR0aDogMTAwJTsKCWJhY2tncm91bmQtY29sb3I6ICMwMGM3 M2M7Cn0KI3dyYXBwZXIgewoJZGlzcGxheTogaW5saW5lLWJsb2NrOwoJd2lkdGg6IDQ1cHg7Cglo ZWlnaHQ6IDQ1cHg7Cglmb250LXNpemU6IDA7CglvdmVyZmxvdzogaGlkZGVuOwp9CiNpY29uIHsK CWRpc3BsYXk6IGlubGluZS1ibG9jazsKCXdpZHRoOiA0NXB4OwoJaGVpZ2h0OiA0NXB4OwoJZm9u dC1zaXplOiAwOwoJYmFja2dyb3VuZC1jb2xvcjogYmx1ZTsKfQo8L3N0eWxlPgo8L2hlYWQ+Cjxi b2R5Pgo8ZGl2IGlkPSJoZWFkZXIiPgoJPGRpdiBpZD0id3JhcHBlciI+CgkJPGRpdiBpZD0iaWNv biI+QTwvZGl2PgoJPC9kaXY+CjwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4K 277961 2016-05-02 19:11:21 -0700 2016-05-02 19:11:21 -0700 result image compare_results.png image/png 2054 enmi.lee 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 YII= 278007 2016-05-03 10:07:51 -0700 2016-05-03 10:35:48 -0700 Slightly more reduced test case inlineblock.html text/html 337 mmaxfield PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHN0eWxlPgojaGVhZGVyIHsKICAgIGhlaWdo dDogNDVweDsKICAgIHdpZHRoOiAxMDAlOwogICAgYmFja2dyb3VuZC1jb2xvcjogIzAwYzczYzsK fQojaWNvbiB7CiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICB3aWR0aDogNDVweDsKICAg IGhlaWdodDogNDVweDsKICAgIGZvbnQtc2l6ZTogMDsKICAgIGJhY2tncm91bmQtY29sb3I6IGJs dWU7Cn0KPC9zdHlsZT4KPC9oZWFkPgo8Ym9keSBzdHlsZT0ibWFyZ2luOiAwcHg7Ij48ZGl2IGlk PSJoZWFkZXIiPjxkaXYgaWQ9Imljb24iPkE8L2Rpdj48L2Rpdj48L2JvZHk+PC9odG1sPg==