overflow-wrap: normal for table into html.css

VERIFIED FIXED in Firefox 63

Status

()

defect
VERIFIED FIXED
11 months ago
8 months ago

People

(Reporter: rowbot, Assigned: xidorn)

Tracking

({regression})

Trunk
mozilla63
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox-esr60 unaffected, firefox61 unaffected, firefox62 unaffected, firefox63 verified)

Details

Attachments

(1 attachment)

Reporter

Description

11 months ago
I am running on the latest nightly on Windows 10.

STR:
1) Visit https://github.com/vscode-icons/vscode-icons/wiki/ListOfFiles
2) Scroll down to bring the table into view.

The table shouldn't overflow its containing element and the first and last 2 columns should not be squished in such a way that the text becomes vertical. This renders properly on Edge and Chrome. Disabling Webrender and running in safe-mode did not fix the issue.
Reporter

Comment 1

11 months ago
This was regressed by Bug 1472386. 

I should mention that when it was working the table rendering was *extremely* slow. I'll file a separate bug for that.
Blocks: 1472386
Keywords: regression
Reporter

Comment 2

11 months ago
I filed Bug 1478500 about the performance issue.
Assignee

Comment 3

11 months ago
Hmm... so this is because GitHub set "word-wrap: break-word" on the top level, and in bug 1472386 we changed how intrinsic size is calculated in that case, which breaks tables on GitHub...

If I add "word-break: break-word" on the page, the table would become broken in the same way on Chrome, which indicates that it isn't really the problem of table layout, but more related to intrinsic size calculation for that case.

Comment 4

11 months ago
When in .markdown-body rule overflow-wrap is set to normal its looking normal. Funny thing

@Xl
>If I add "word-break: break-word" on the page, the table would become broken in the same way on Chrome
Not exactly the same. In Chromium is still keeping width sie from <div class="markdown-body"> but in Firefox take size from <div class="repository-content">

Comment 5

11 months ago
Maybe consider adding `table { word-wrap: normal; }` to the UA style sheet, see if that addresses most of the web-compat concerns?

Comment 6

11 months ago
Or just not inherit that rule for tables by default from higher levels
Assignee

Updated

11 months ago
Assignee: nobody → xidorn+moz
Assignee

Comment 7

11 months ago
This would fix this bug as well as webcompat/web-bugs#17900.

The argument for this to be a reasonable change is that, table cells can
never shrink below the min intrinsic size, so overflow-wrap: break-word
doesn't make any sense in table when it didn't affect intrinsic size.
So this change basically revert the behavior of bug 1472386 for tables
which seems to be the biggest problem so far.
Comment on attachment 8996900 [details]
Bug 1478455 - Add overflow-wrap: normal for table to html.css. r?dbaron

David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-7 has approved the revision.

https://phabricator.services.mozilla.com/D2638
Attachment #8996900 - Flags: review+
As I noted in the review and would like to note here as well since it's not specifically about the code:


One note is that you should somehow keep track of the stuff that would need to be backed out if we decide to revert the whole set of changes, since now you have two pieces (this and bug 1472386).  I think you should file a tracking bug for a decision to either ship or revert the whole set of changes, request tracking for 63 (that's the right release, right?), so that we have a bug where we're being pushed to make an explicit decision one way or the other about shipping in 63 rather than just shipping by default because we put it in nightly.

Comment 10

11 months ago
Pushed by xquan@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/9c9b31d0ed53
Add overflow-wrap: normal for table to html.css. r=dbaron
Assignee

Updated

11 months ago
Blocks: 1480284
Assignee

Comment 11

11 months ago
Filed bug 1480284 for tracking.
Duplicate of this bug: 1479625

Comment 13

11 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/9c9b31d0ed53
Status: NEW → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla63
Summary: Markdown table rendered incorrectly → overflow-wrap: normal for table into html.css
QA Whiteboard: [good first verify]
I have reproduced this bug with Nightly 63.0a1 (2018-07-25) on Windows 7, 64 Bit!
This bug's fix is verified with latest DeveEdition Beta 63.0b14!

Build ID 	20181011200118
User Agent 	Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
QA Whiteboard: [good first verify] → [good first verify] [testday-20181012]
Depends on: 1505520
Thank you, Mohammad Maruf Rahman!
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.