Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Writing-mode: vertical; breaks flexbox layout in Firefox #98
Minimalist example: https://jsbin.com/tiqeleveno/edit?html,output
in Chrome 46.0.2490.80 works as expected.
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)
Adding screenshots of testing the JSBin under IE 11 and Edge - each of 4 browsers is different - you're a winner! :)
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 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!)
Using the browser debuggers I looked at the DOM values for
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
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?)
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'.
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.