When Edge Windows is Resized and Media Queries are used to change visisbility of elements some CSS breaks

Not reproducible Issue #15658625

Details

Author
Aaron M.
Created
Jan 27, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16299
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Note: this has been a little tricky to diagnose and figure out how to reproduce.

When styling a list using "list-style-type: none", applying some margins and passing, and using media queries to only show the list for specific screen sizes can result in the list being rendered incorrectly if it was not visible when the page first loaded.

To reproduce this using the attached code example (make sure the HTMl and CSS files are in the same directory then open the HTML file in Edge):

  1. make sure Edge is maximised so the window is larger than 800px wide, notice the <a> tag has a gray background and that’s the only background colour you should see, and that there are no bullit points.
  2. Shrink the window so it is smaller than 800px, this will cause the list to disappear thanks to the media query.
  3. refresh the page
  4. maximise the window and notice you now also see a dark blue area above the gray <a> tag, this is the <li> tag and as you can see it does not properly render the padding/margins to be 0px, you might also see the bullit point appear when it shouldn’t.

This bug also doesn’t seem to be consistent, ocassionally it will not happen, but ususally it does and may take several refreshes of the page before it appears.

Attachments

2 attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Steps to Reproduce

    Changed Steps to Reproduce

  • Hello,

    Thank you for providing this information about the issue. After thorough testing, we are unable to reproduce this problem in Edge 16299. Please run dxdiag (Windows key + r and type dxdiag, enter, then click Save all Information) and attach the txt file. It may help provide us more clues
    if you include a video capture of your repro steps.

    Best Wishes,
    The MS Edge Team

  • Microsoft Edge Team

    Changed Status to “Not reproducible”

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

Sign in