display: table-cell; bug when resizing window

Originator:cvrebert
Number:rdar://18987206 Date Originated:14-Nov-2014
Status:Closed Resolved:12-Oct-2015
Product:Safari Product Version:8.0 (10600.1.25)
Classification:Other Bug Reproducible:Always
 
Summary:
display: table-cell; doesn't quite work correctly when resizing the browser window.

Steps to Reproduce:
1. Open http://jsbin.com/laracu/2 in Safari.
2. Ensure that the window is fairly wide, such that the nav menu displays horizontally. If not, resize the window to be wider and reload the webpage.
2. Resize the window to be narrower (mobile-ish width), until the nav menu starts displaying vertically.
3. Resize the window to be wider, until the nav menu stops displaying vertically.

Expected Results:
The nav menu should return to its original, expected appearance (i.e. one row of evenly spaced items), 

Actual Results:
The nav menu displays as two rows, the first having 4 items and the second having two items (screenshot C).

Version:
Safari version 8.0 (10600.1.25)
OS X Yosemite

Notes:
Also filed as https://bugs.webkit.org/show_bug.cgi?id=138167
Possibly related to https://bugs.webkit.org/show_bug.cgi?id=113839 and/or https://bugs.webkit.org/show_bug.cgi?id=53166
Original Bootstrap bug: https://github.com/twbs/bootstrap/issues/9774
Chrome and Firefox render the nav menu correctly in these circumstances. Chrome used to also exhibit this same bug, but has since fixed it.

Configuration:


Attachments:
'table-cell.png' was successfully uploaded.

Comments

Fixed in WebKit Nightly

See http://trac.webkit.org/changeset/190893


Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!