UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Steps to reproduce the problem:
1. Include a <ul> with a multi-column layout and relatively-positioned <li> children on the page.
2. Also have any content anywhere on the page with an inline "transform: translate3d(...)" style. (This apparently must be inline; if done via CSS it works fine).

See attached example file or this fiddle: https://jsfiddle.net/1cv935zv/9/

What is the expected behavior?
The content in the <li>s should wrap to maintain even column heights, and should not overflow out of the containing <ul>.

What went wrong?
Any content within a single <li> that should be broken up between the end of one column and start of the next only shows up at the end of the earlier column, and overflows the container to overlap with content following.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 65.0.3325.181  Channel: stable
OS Version: 10.0
Flash Version: 

This can be worked around in plenty of ways (changing the inline transform to a style tag/sheet, adding a 3d transform to the <ul>, removing the "relative" positioning from the <li>) but should be working
 

Deleted: broken-columns.html 1.3 KB

broken-columns.html 1.3 KB View Download