New issue
Advanced search Search tips

Issue 817329 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 786899
Owner:
Closed: Mar 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

[css-grid] Text (in a Grid layer) wraps although there's room

Reported by t...@tobireif.com, Feb 28 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

Steps to reproduce the problem:
1. Open https://tobireif.com/demos/grid/ , click on Layout 3.
2. Right-click on the large background "D" -> Inspect.
3. Set the h1 font size to 382px.

What is the expected behavior?
The background text "GRID" should not wrap (when that font size is set).

What went wrong?
The background text "GRID" does wrap in Chrome. In Firefox it doesn't wrap (when the same font size is set) - as intended (I want the text to will the whole available width).

Please see the screenshots.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 64.0.3282.186  Channel: stable
OS Version: OS X 10.13.3
Flash Version: 

(I attached a zip because my page might change.)
 
screenshot_firefox_h1_size_382px.png
533 KB View Download
screenshot_chrome_h1_size_382px.png
489 KB View Download
grid_demo_copy.zip
159 KB Download

Comment 1 by t...@tobireif.com, Feb 28 2018

"I want the text to will the whole available width"
->
"I want the text to fill the whole available width"

Comment 2 by t...@tobireif.com, Feb 28 2018

Safari/WebKit report:
https://bugs.webkit.org/show_bug.cgi?id=183209
Components: Blink>Layout>Grid
Labels: Needs-Triage-M64

Comment 6 by e...@chromium.org, Feb 28 2018

Cc: r...@igalia.com
Status: Available (was: Unconfirmed)

Comment 7 by r...@igalia.com, Mar 6 2018

Cc: svil...@igalia.com jfernan...@igalia.com
Labels: -OS-Mac
Mergedinto: 786899
Owner: r...@igalia.com
Status: Duplicate (was: Available)
Thanks for the bug report, please next time try to create a reduced test case
(https://css-tricks.com/reduced-test-cases/).

I've been investigating it and I'm attached a much smaller example reproducing the issue.
The difference with Firefox is because the size of item in Firefox is 150px,
so the word is not wrapped.
While in Chrome it's 100px and the word is wrapped.

In the original example the problem was that in Firefox the item was bigger than 1200px
while in Chrome it was not.

I believe this is a duplicate of #786899, which we haven't fixed yet
as we're discussing it at CSSWG: https://github.com/w3c/csswg-drafts/issues/2177


bug-817329.html
275 bytes View Download

Comment 8 by r...@igalia.com, Mar 6 2018

Summary: [css-grid] Text (in a Grid layer) wraps although there's room (was: Text (in a Grid layer) wraps although there's room)

Comment 9 by t...@tobireif.com, Mar 7 2018

> please next time try to create a reduced test case

As long as I have to use unpaid time, reporting the respective issue (including steps for reproducing, screenshots, the code restructured to work standalone/locally eg as zip, any additional requested info etc) and tracking progress for all the (currently 12) reported bugs is all I can do. I hope it's sufficient, and I hope it's appreciated - even without reduced test-cases.

Perhaps I should switch to reporting just security issues where there are bug bounty programs 😀 Seriously though, I hope that browsers will become less and less buggy (through reports and through shared web-platform tests etc), and I thoroughly appreciate all your work towards fully implemented and correctly working Grid in several(!) browsers.  (also, the work of Igalia etc)

Regarding this here issue:

Thanks for investigating! I hope that my background cell / background text can fill the whole available width soon.

Comment 10 by t...@tobireif.com, Mar 18 2018

I can't reproduce this anymore (in Chrome 65) - somehow this has been fixed it seems?

Comment 11 by t...@tobireif.com, Mar 18 2018

Nevermind - when I follow my steps using the stable code (the zip attached to this bug ticket) the issue is still there: the text breaks.

Sign in to add a comment