Writing-mode: vertical; breaks flexbox layout in Firefox

[MichaPau]

Minimalist example: https://jsbin.com/tiqeleveno/edit?html,output

in Chrome 46.0.2490.80 works as expected. in IE 11.0.xxxx works, just the text-orientation is ignored

in Firefox 42 the content after the vertical heading completely disappears and the browser gets a very long horizontal scrollbar.

I don't know if that is a Flexbox issue or rather a Firefox bug (more likely)

Screenshots (chrome-works; firefox-bug)

[tshinnic]

Adding screenshots of testing the JSBin under IE 11 and Edge - each of 4 browsers is different - you're a winner! :)

IE 11

IE shows essentially the same output as Chrome, except the letters are turned 90° and so the vertical height of the text is shorter (using character spacing instead of line-height to determine total height), and so the box is shorter. Better than Chrome or FF?

Edge

Edge shows the vertical text different again, where the text has wrapped so that there are two lines of text (and which is turned 90° as for IE) in the left-hand box, and the entire box is shorter than IE.

No insights here, but each browser differs in rendering. (And when last I had to do something like this I could and had to resort to SVG!)

[tshinnic]

Using the browser debuggers I looked at the DOM values for offsetXxxxx for both the .section-header and .section-content elements, under FF, Chrome, and Edge.

values for "offsetXxxxx" element attributes

         Chrome 46         |          Edge             |        FireFox 42
                           |                           | 
.section-header            |                           | 

  Top  Left  Height Width  |  Top  Left  Height Width  |  Top  Left  Height Width
   81    9    374    37    |   81    9    122    65    |   82    9    346    36
                           |                           | 
.section-content           |                           | 
  Top  Left  Height Width  |  Top  Left  Height Width  |  Top  Left  Height Width
   81   46    374    162   |   81   74    122   162    |   82 17895716 346   90

In only FF 42 does a horizontal scrollbar appear...

One of the values above deviates by a few orders of magnitude from the others. If the left edge of the text content is shifted a hundred millions pixels rightwards it would indeed take a wide screen - 3 miles? - to display the text content. I'd say this is a FireFox bug activated by writing-mode: vertical-rl; within a flexbox.

I flipped the order of <h2> and <div> and saw this in FF (and basically the same in the others) So the text isn't exactly lost, it's just wandering far afield...

I'd submit a bug report. I've looked and can't find this reported. (Though the bugs search seems to frustrate even finely focussed users - there is no CSS or 'display' categories?)

[MichaPau]

Thanks for investigating and submitting a bug report. Could you post the link to the report please. I tried to find it on bugzilla.mozilla.org but failed.

[tshinnic]

Oooo, I hadn't done it, was wondering if you wanted to do it, but if I could point to your example...

[tshinnic]

I've submitted Bug 1223180 "Flex + vertical writing-mode: flex items / text disappear" regarding the above bug.

While researching I accidentally came across Bug 1189131 - flex align-items center displaces text when writing-mode is vertical-rl . I didn't find that in searching twice before!

It is somewhat simpler using fewer flex constructs and yet also hits the 'same' problem - disappearing content (with wildly wrong offsetLeft values only under FireFox).

Check both bugs for what Mozilla figures out. I can't think of any workaround that wouldn't involve JS and poking 'style.left'.

[MichaPau]

I deferred to submitting one myself and now it's done, thanks again.

[ericqianli]

I'm having the same issue on Firefox. Apparently firefox is not generating the correct width of my vertical-rl dom.

[dholbert]

I've got patches that should fix this issue, over in https://bugzilla.mozilla.org/show_bug.cgi?id=1267462 - hopefully this will be fixed in Firefox Nightly 60 within a few days.