New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Writing-mode: vertical; breaks flexbox layout in Firefox #98

Open
MichaPau opened this Issue Nov 6, 2015 · 8 comments

Comments

Projects
None yet
4 participants
@MichaPau

MichaPau commented Nov 6, 2015

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)

chrome_screenshot
firefox_screenshot

@tshinnic

This comment has been minimized.

tshinnic commented Nov 6, 2015

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

IE 11
flexbugs_98_w_ie11

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
flexbugs_98_w_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

This comment has been minimized.

tshinnic commented Nov 6, 2015

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)
flexbugs_98_w_ff_swapped_divs
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

This comment has been minimized.

MichaPau commented Nov 7, 2015

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

This comment has been minimized.

tshinnic commented Nov 8, 2015

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

@tshinnic

This comment has been minimized.

tshinnic commented Nov 9, 2015

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

This comment has been minimized.

MichaPau commented Nov 10, 2015

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

@ericqianli

This comment has been minimized.

ericqianli commented May 22, 2016

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

@dholbert

This comment has been minimized.

dholbert commented Feb 8, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment