Setting an explicit height on content in a grid changes the "height: 100%" calc for sibling elements
Reported by
matthewd...@gmail.com,
Jun 6 2018
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Steps to reproduce the problem: 1. Go to https://codepen.io/matthewdean/pen/LrZxjX 2. Note that the "toothpick" element in the grid row is set to height: 100% 3. When its sibling element has inherent height (height from content), and as such pushes the grid row to that height, then the toothpick is full height, however; 4. When its sibling element has an explicit height (inline style), even though it sets the grid row height, the height: 100% calculation fails. What is the expected behavior? height: 100% should be 100% of the grid row height. Changing the sibling element to an explicit height (vs. auto) should not change the height: 100% calculation of a sibling What went wrong? The toothpick's 100% calculation changes based on whether the grid row height is being set intrinsically or explicitly. Did this work before? No Does this work in other browsers? No This is working correctly in Firefox. This is failing in the same way in Safari. Chrome version: 66.0.3359.181 Channel: n/a OS Version: OS X 10.12.6 Flash Version: Shockwave Flash 29.0 r0
,
Jun 6 2018
,
Jun 6 2018
Able to reproduce this issue on reported version 66.0.3359.181, on latest stable and latest canary 69.0.3450.0 using Windows 10, Mac 10.13.3 and Ubuntu 17.10. This issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged. Thanks!
,
Jun 7 2018
,
Jun 7 2018
Thanks for the bug report. Please could you explain better how to reproduce the issue, provide a screenshot or something. In the codepen I see no differences in Firefox vs Chromium rendering, attaching a screenshot of Chromium rendering. BTW, note that the simpler the test case, the easier to identify the root cause and fix it (see https://developer.mozilla.org/en-US/docs/Mozilla/QA/Reducing_testcases).
,
Jun 8 2018
Well this is what I WAS seeing (I screenshotted from Safari just now), but I'm frankly baffled, because I can't reproduce it either. It isn't happening as of Chrome 67.0.3396.79, and even before it updated from 66 to 67 this morning, I couldn't reproduce. And I couldn't reproduce on Safari on my MacBook at home this morning where I have High Sierra installed. So... fixed in both places?
,
Jun 8 2018
Ok, I was not understanding the problem as comment #3 said it was reproducible on stable and canary too. There have been fixes in both Chromium and WebKit related to percentages, so yeah it might be fixed but one of those. Good to know it's working as expected now.
,
Jun 8 2018
Hang on.... it's not working as expected in my app, but working with the reduced test case that I created based on the problem in my app. What the.... will investigate more. I was able to reproduce with that Codepen; it's just that codepen is (currently? temporarily?) working.
,
Jun 8 2018
Mmmm, until we have a test case that is broken on trunk/Canary we cannot help much more. If you have a different test that doesn't work on Canary, please share it. You can try to bisect it and find the commit that fixed the issue if you like, but I'm not sure if that's really important at this stage. There are other issues with percentages and grids, we've some bug reports about them, and they'll hopefully get fixed at some point. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by krajshree@chromium.org
, Jun 6 2018