New issue
Advanced search Search tips

Issue 625102 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Jul 2016
Cc:
jfernan...@igalia.com
r...@igalia.com
cbiesin...@chromium.org
svil...@igalia.com
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug



Sign in to add a comment

[css-grid] Intrinsic row size wrong calculated if the grid item contains an image

Project Member Reported by r...@igalia.com, Jul 1 2016 

Just a very simple example of a grid, where the grid item contains an image:
  <div style="display: grid;">
    <div id="item">
      <img src="https://placehold.it/100x100">
    </div>
  </div>

The item and row have 105px as height, instead of 100px as expected.

Check it live at: http://jsbin.com/vifuzu/1/edit?html,css,output
grid-item-image.html
220 bytes View Download
grid-item-image-current.png
904 bytes View Download
grid-item-image-expected.png
878 bytes View Download

Comment 1 by r...@igalia.com, Jul 1 2016

Blocking: -79180
Components: -Blink>Layout>Grid
Status: WontFix (was: Available)
This is not a bug, it happens in any regular block with an image inside if the image doesn't have "display: block;".

Comment 2 by cbiesin...@chromium.org, Jul 1 2016

Cc: cbiesin...@chromium.org
Yeah images get placed on the baseline of a line, leaving the descent visible. Could try vertical-align: bottom or something to fix it.

Comment 3 by r...@igalia.com, Jul 5 2016 

Yeah that would do the trick, as I said using "display: block;" on the image also works.

Sorry for the noise.
►

Sign in to add a comment