Two long words in a flex column with flex-wrap causes following paragraph to overlap
Reported by
qbo...@gmail.com,
Jun 12 2017
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Steps to reproduce the problem: 1. Visit https://jsfiddle.net/xvjrs2n7/24/ or open the attached chrome-bug.html 2. Observe the position of the <p> element What is the expected behavior? Text of the <p> element should be below the div's text What went wrong? The text of <p> element overlaps with div's. Did this work before? N/A Does this work in other browsers? No In Firefox the texts overlap. In Edge the texts do not overlap. Chrome version: 58.0.3029.110 Channel: n/a OS Version: 10.0 Flash Version: It seems that the problem is resolved by any of the following: 1. splitting the word "toimintaympäristöllemme" by adding a space in the middle 2. splitting the word "osuustoiminnallisuus" by adding a space in the middle 3. adding `.a { word-break: break-word; }` to CSS rules 4. removing `flex-wrap : wrap` from the rules
,
Jun 13 2017
,
Jun 13 2017
It seems that adding :after pseudoelement, and then manipulating it (for example: changing it's content) fixes the bug.
So, one workaround is to use an animation which for a moment adds and then removes :after, like this:
@keyframes changeXtoEmpty {
from {content:"x";}
}
.c::after{
content:" ";
animation: changeXtoEmpty 0.1s;
}
,
Jun 13 2017
The above workaround is presented here: https://jsfiddle.net/xvjrs2n7/25/
,
Jun 13 2017
When I wrote that the problem is visible in Firefox, that was Firefox 45.0.1. I then upgraded to 47.0.2 and the problem still persists (and is not fixed by animation trick above). Then it updated to 53.0.3 and now it works good.
,
Jun 19 2017
Able to reproduce the issue on Windows 7,Mac 10.12.5 & Ubuntu 14.04 using chrome stable#59.0.3071.104 & Latest Canary#61.0.3134.0 as per comment#0. Manual bisect info: ------------------ Good-37.0.2046.0 -Revision-175978 Bad-37.0.2047.0 -Revision-176039 Since it is regressed in M37,unable to provide bisect with new script. Through old script "We don't have enough builds to bisect" error displayed. Manual change log from Omahaproxy: ---------------------------------- https://chromium.googlesource.com/chromium/src/+log/37.0.2046.0..37.0.2047.0?pretty=fuller&n=10000 Unable to find the suspect from the above Cl, hence marking it as Untriaged to get more inputs from dev. Please find the attached screenshot for reference. Thanks.
,
Oct 27 2017
,
Oct 30 2017
,
Oct 31
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 5
,
Nov 9
Hm... https://chromium-review.googlesource.com/c/chromium/src/+/1323906 fixes this testcase, but there must be a different underlying issue. Note to self: try with align-content: flex-start |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by qbo...@gmail.com
, Jun 12 201719.8 KB
19.8 KB View Download