New issue
Advanced search Search tips

Issue 700555 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 3
Type: Bug



Sign in to add a comment

inline-flexbox on a h1 breaks before last word

Reported by neupat...@gmail.com, Mar 10 2017

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/56.0.2924.76 Chrome/56.0.2924.76 Safari/537.36

Example URL:
not public, own website

Steps to reproduce the problem:
1. h1 element with display: inline-flex and a ::before and ::after pseudo element
2. pseudo elements seem to behave as expected, last word of the text will be in next line
3. does not happen with display: flex
4. works correctly in firefox, problem in chrome and chromium

What is the expected behavior?

What went wrong?
unexpected break of text

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 56.0.2924.76  Channel: stable
OS Version: 4.4.0-66-generic
Flash Version: none

this seems similar: https://stackoverflow.com/questions/29985416/display-webkit-flex-pushes-inline-block-div-to-next-line-in-safari

don't know if it really correlates
 
Bildschirmfoto vom 2017-03-10 23-47-09.png
554 KB View Download
Bildschirmfoto vom 2017-03-10 23-56-09.png
444 KB View Download

Comment 1 by kojii@chromium.org, Mar 13 2017

Cc: kojii@chromium.org
Components: -Blink Blink>Layout>Flexbox
Labels: Needs-Feedback
NextAction: 2017-03-26
Could you mind to share a URL that reproduce this problem?

I checked the stackoverflow page, but it says it works good in Chrome and URLs in the page works good for me too.

Comment 2 by neupat...@gmail.com, Mar 14 2017

I found out the problem is with a ::after or ::before element having set a width and display: inline-table;
I attached a file with an example.
Note that always the last word gets pushed to the next line.
There seems to be no problem with other display values, though I didn't try all.
I don't actually know what the correct behavior should be but I thought the text will stay in one line and firefox thinks that too.
index.html
207 bytes View Download
Project Member

Comment 3 by sheriffbot@chromium.org, Mar 14 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "kojii@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 4 by kojii@chromium.org, Mar 15 2017

Cc: -kojii@chromium.org
Status: Untriaged (was: Unconfirmed)
Thank you for the reproducible case, confirmed the line wraps if "inline-flex".

Comment 5 by e...@chromium.org, Mar 16 2017

Labels: -Pri-2 Pri-3
Owner: cbiesin...@chromium.org
Status: Assigned (was: Untriaged)
NextAction: ----

Sign in to add a comment