{"id":637,"date":"2010-12-04T21:43:30","date_gmt":"2010-12-05T05:43:30","guid":{"rendered":"http:\/\/www.visophyte.org\/blog\/?p=637"},"modified":"2010-12-04T21:43:30","modified_gmt":"2010-12-05T05:43:30","slug":"understanding-where-layout-goes-wrong-with-gecko-reflow-debug-logs-part-2","status":"publish","type":"post","link":"https:\/\/www.visophyte.org\/blog\/2010\/12\/04\/understanding-where-layout-goes-wrong-with-gecko-reflow-debug-logs-part-2\/","title":{"rendered":"understanding where layout goes wrong with gecko reflow debug logs (Part 2)"},"content":{"rendered":"

\"\"<\/a><\/p>\n

In part 1<\/a>, I was fighting some kind of flex-box layout problem in gecko that I put on the metaphorical back burner. \u00a0The metaphorical pot is back, but rebuilt because the old pot did not support animation using CSS transitions. \u00a0(I was using overflow: none in combination with scrollLeft\/scrollTop to scroll the directly contained children; now I’m using overflow: none with a position:absolute child that holds the children and animates around using CSS left\/top.) \u00a0Thanks to the rebuild, the truly troublesome behavior is gone. \u00a0But helpfully for providing closure to the previous blog post, gecko still was enlarging something and so causing the page to want to scroll.<\/p>\n

With a few enhancements to part 1’s logic, we add a “growth” command so we can do “\ufeff\ufeffcfx run growth serial-13-0” and get the following results:<\/p>\n

*** block 19 display: block tag:div id: classes:default-bugzilla-ui-bug-page-title\r\n*** inline 20 display: inline tag:span id: classes:default-bugzilla-ui-bug-page-summary\r\ninline 20 variant 1  (parent 19) first line 368\r\n  why: Reflow\r\n  display: inline\r\n  inputs: reflowAvailable: 960,UC\r\n          reflowComputed: UC,UC\r\n          reflowExtra: dirty v-resize\r\n  output: reflowDims: 885,21\r\n  parent concluded: prefWidth: 885\r\n                    minWidth: 100\r\n                    reflowDims: 960,21\r\n*** block 23 display: block tag:div id: classes: [elided]\r\n*** SVGOuterSVG(svg)(0) 27 display: inline tag:svg id: classes:\r\nSVGOuterSVG(svg)(0) 27 variant 1  (parent 23) first line 850\r\n  why: GetPrefWidth,GetMinWidth,Reflow\r\n  display: inline\r\n  inputs: reflowAvailable: 187,UC\r\n          reflowComputed: 187,1725\r\n          reflowExtra: dirty v-resize\r\n  output: prefWidth: 187\r\n          minWidth: 0\r\n          reflowDims: 187,1725\r\n  parent concluded: prefWidth: 187\r\n                    minWidth: 0\r\n                    reflowDims: 187,1730<\/pre>\n
The growth detection logic is simple and not too clever, but works. \u00a0For nodes that are the sole child of their parent, we check if there is a difference between how large the child wants to be and how large the parent decides to be that cannot be accounted for by the margin of the child and the border\/padding of the parent.<\/p>\n
The first reported node is being forced wider than it wanted to be because of an explicit width assigned to a flex-box. \u00a0The second reported node is the SVG node that we are rendering our timeline into (see the screenshot). \u00a0We can see that its parent ends up being 5 pixels taller than the SVG node. \u00a0This is concerning and very likely our problem.<\/p>\n
The answer is the “display: inline” bit. \u00a0If you are foolish enough to fire up gdb, it turns out that nsBlockFrame::ReflowLine checks whether its child line is a block or not. \u00a0If it’s not, we end up in \ufeff\ufeffnsLineLayout::VerticalAlignLine which calls VerticalAlignFrames which decides to set mMinY=-1725px and mMaxY=5px. \u00a0I am only half-foolish so I just added a “display: block”, saw that it made the problem go away, \u00a0and stopped there.<\/p>\n
To summarize, “svg” elements are not “display: block” by default and gecko appears to decide to pad the sole child out with some kind of line height logic. \u00a0This does not happen in webkit\/chromium in this specific situation; this is notable in this context because inconsistencies between layout engines are likely to be particularly frustrating. \u00a0The gecko reflow debug logs and my tooling do not currently make the causality blindingly obvious, although I have made the output explicitly call out the “display” type more clearly so the inference is easier to make. \u00a0It turns out that if I had built gecko with -DNOISY_VERTICAL_ALIGN I would have gotten additional output that would likely have provided the required information.<\/p>\n","protected":false},"excerpt":{"rendered":"
In part 1, I was fighting some kind of flex-box layout problem in gecko that I put on the metaphorical back burner. \u00a0The metaphorical pot is back, but rebuilt because the old pot did not support animation using CSS transitions. … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[7],"tags":[87],"class_list":["post-637","post","type-post","status-publish","format-standard","hentry","category-debugging","tag-layout"],"_links":{"self":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":11,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/637\/revisions"}],"predecessor-version":[{"id":650,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/637\/revisions\/650"}],"wp:attachment":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/media?parent=637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/categories?post=637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/tags?post=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}