RESOLVED FIXED Bug 154280
REGRESSION (r196620): Web Inspector: DataGrid headers and resizers are misaligned when the scrollbar is visible 
https://bugs.webkit.org/show_bug.cgi?id=154280
Summary REGRESSION (r196620): Web Inspector: DataGrid headers and resizers are misali...
Nikita Vasilyev
Reported 2016-02-15 22:05:25 PST
Created attachment 271414 [details] [Animated GIF] Bug I just broke it in Bug 154276. On the attached animated GIF, resizers have red background.
Attachments
[Animated GIF] Bug (678.68 KB, image/gif)
2016-02-15 22:05 PST, Nikita Vasilyev 		no flags
Details
[Patch] Failed attempt (3.64 KB, patch)
2016-02-15 22:20 PST, Nikita Vasilyev 		nvasilyev: review-
nvasilyev: commit-queue-
DetailsFormatted DiffDiff
[Image] overflow-y: scroll (44.59 KB, image/png)
2016-02-17 20:53 PST, Nikita Vasilyev 		no flags
Details
Patch (1.76 KB, patch)
2016-02-17 21:12 PST, Nikita Vasilyev 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2016-02-15 22:05:59 PST
<rdar://problem/24670567>
Nikita Vasilyev
Comment 2 2016-02-15 22:20:18 PST
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.
Timothy Hatcher
Comment 3 2016-02-16 09:35:48 PST
Another ride would be to use overflow-y: scroll.
Timothy Hatcher
Comment 4 2016-02-16 09:38:14 PST
Another option*
Nikita Vasilyev
Comment 5 2016-02-17 20:53:04 PST
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.
Timothy Hatcher
Comment 6 2016-02-17 20:56:19 PST
Alright, let's revert for DataGrid.
Nikita Vasilyev
Comment 7 2016-02-17 21:12:30 PST
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.
WebKit Commit Bot
Comment 8 2016-02-17 22:03:28 PST
Comment on attachment 271625 [details] Patch Clearing flags on attachment: 271625 Committed r196743: <http://trac.webkit.org/changeset/196743>
WebKit Commit Bot
Comment 9 2016-02-17 22:03:32 PST
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.