Open
Bug 1791398
Opened 2 years ago
Updated 2 years ago
CSS grid alignment by baseline with images is incorrect
Categories
(Core :: Layout: Grid, defect)
Tracking
()
NEW
People
(Reporter: zigarion, Unassigned)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:104.0) Gecko/20100101 Firefox/104.0
Steps to reproduce:
Open code example https://codepen.io/supertrooper/pen/mdLmawX
It works correctly in Chrome and Safari >= 16.
HTML example attached.
Actual results:
Alignment for some items is broken: some items are above their real positions, if they have an IMG element inside.
Expected results:
All items of grid aligned by text in them.
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Grid' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Component: Untriaged → Layout: Grid
Product: Firefox → Core
Comment on attachment 9295277 [details] index.html ><html> ><head> > <meta charset="UTF-8"> > <meta name="viewport" > content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> > <meta http-equiv="X-UA-Compatible" content="ie=edge"> > <title>Document</title> > > <style> > .grid { > width: 500px; > gap: 24px; > display: grid; > grid-template-columns: repeat(4, 1fr); > align-items: baseline; > } > .image-like { > background: green; > } > img { > display: block; > width: 100%; > } > </style> ></head> ><body> ><h2>Grid with divs (correct)</h2> ><div class="grid"> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 130px;"></div> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 110px;"></div> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 140px;"></div> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 90px;"></div> > </div> > title > </div> > </div> ></div> > ><h2>Grid with images (incorrect)</h2> > ><div class="grid"> > <div class="item"> > <div> > <div> > <img src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg/150px-Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg" /> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <img src="//upload.wikimedia.org/wikipedia/commons/thumb/0/02/King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg/150px-King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg" /> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/George_II_by_Thomas_Hudson.jpg/300px-George_II_by_Thomas_Hudson.jpg" /> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg/150px-Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg"/> > </div> > title > </div> > </div> ></div> ></body> ></html>
Comment on attachment 9295277 [details] index.html ><html> ><head> > <meta charset="UTF-8"> > <meta name="viewport" > content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> > <meta http-equiv="X-UA-Compatible" content="ie=edge"> > <title>Document</title> > > <style> > .grid { > width: 500px; > gap: 24px; > display: grid; > grid-template-columns: repeat(4, 1fr); > align-items: baseline; > } > .image-like { > background: green; > } > img { > display: block; > width: 100%; > } > </style> ></head> ><body> ><h2>Grid with divs (correct)</h2> ><div class="grid"> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 130px;"></div> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 110px;"></div> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 140px;"></div> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <div class="image-like" style="height: 90px;"></div> > </div> > title > </div> > </div> ></div> > ><h2>Grid with images (incorrect)</h2> > ><div class="grid"> > <div class="item"> > <div> > <div> > <img src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg/150px-Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg" /> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <img src="//upload.wikimedia.org/wikipedia/commons/thumb/0/02/King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg/150px-King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg" /> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/George_II_by_Thomas_Hudson.jpg/300px-George_II_by_Thomas_Hudson.jpg" /> > </div> > title > </div> > </div> > <div class="item"> > <div> > <div> > <img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg/150px-Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg"/> > </div> > title > </div> > </div> ></div> ></body> ></html>
|
|
||
Comment 5•2 years ago
|
||
The severity field is not set for this bug.
:alaskanemily, could you have a look please?
For more information, please visit auto_nag documentation.
Flags: needinfo?(emcdonough)
|
||
Updated•2 years ago
|
Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(emcdonough)
You need to log in
before you can comment on or make changes to this bug.
Description
•