Created attachment 271414 [details] [Animated GIF] Bug I just broke it in Bug 154276. On the attached animated GIF, resizers have red background.
<rdar://problem/24670567>
Created attachment 271418 [details] [Patch] Failed attempt There are at least two ways of fixing this: 1. Keep "overflow-y: overlay" for DataGrid. 2. Synchronize the width of DataGrid's header with .data-container, which may have a scrollbar. This is tricky. I used an obscure WebKit-only overflowchanged event to detect scrollbar visibility. It turned out to be unreliable. "event.verticalOverflow" was "true" even when the scrollbar wasn't visible.
Another ride would be to use overflow-y: scroll.
Another option*
Created attachment 271624 [details] [Image] overflow-y: scroll I experimented with "overflow-y: scroll". Simply replacing "overflow-y: auto" with "scroll" creates misaligned headers (on the attached image, at the top). Adding "overflow-y: auto" to the DataGrid header fixes that, but it looks odd (on the attached image, at the top). Two scrollbars visually merge into one and it's misleading. I think we should revert to "overflow-y: overlay". "overflow-y: auto" works fine for the console, but for DataGrids it's more complicated.
Alright, let's revert for DataGrid.
Created attachment 271625 [details] Patch I'll need a light-bulb moment to make "overflow-y: auto" work. Reverting to "overflow-y: overlay" for now.
Comment on attachment 271625 [details] Patch Clearing flags on attachment: 271625 Committed r196743: <http://trac.webkit.org/changeset/196743>
All reviewed patches have been landed. Closing bug.