css grid sticky header misalignment

Duplicate Issue #15194033 • See Issue #15052782

Details

Author
Markus M.
Created
Dec 22, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #15052782
Found in build #
16.16299
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I have a css grid with a sticky header row and a frozen first column, so I can scroll in the grid and keep the header and first column fixed. The grid fills the page.

Now, if I load the page into Edge or if I maximize the browser window the cells in the header row are not aligned with the cells in the grid’s body.
When I resize the browser window (e.g. by restoring the maximized window or by opening the search bar), they become aligned again.
The misalignment also happens occasionally when I quickly resize the browser window.

See this demo: https://plnkr.co/edit/DG4Qs2826WKZ2g8UDEFH?p=preview

You should launch the plunker preview in a separate window. You can also see the issue the first time you run the demo or if you resize the preview pane.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • Hi Markus,

    Can you send a screenshot or a capture a short video?

    Also, will you provide the extended version of Windows 10 you are using?  Win + S and type “winver” and hit enter.  I was not able to repro this in 16299.125.

    Steve

  • Hi Steve,

    I uploaded a screenshot. Note that the last column “Category” is misaligned. This happened after dragging the vertical devider in Plunker to the left.

    My Windows 10 version is 16299.125 as well.

  • Microsoft Edge Team

    Changed Assigned To to “bbrinza”

  • Issue confirmed, thank you for your bug report!

  • Microsoft Edge Team

    Changed Status to “Duplicate”

  • This bug has marked as duplicate. Please follow the parent issue to get new updates.

You need to sign in to your Microsoft account to add a comment.

Sign in