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

Duplicate Issue #15658625 • See Issue #104357

Details

Author
Aaron M.
Created
Jan 27, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #104357
Found in build #
16.16299
Reports
Reported by 3 people

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.

UPDATED STEPS by MS TEAM

  1. Visit https://www.comedy.co.uk/forums/thread/1961/#P22264

  2. Hover mouse over menu items to see bullets (dots) and extra space (spacers) around list elements. Screenshot attached.

  3. If you do not see the visual bug, try forceful refresh (Ctrl + F5).

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”

  • Our company’s web site has been experiencing a very similar issue since EdgeHTML update to v16. Like the Arron M. has mentioned, it is very difficult to diagnosed. No error or warning in console, and ‘List-style:none’ is shown in Inspect Element as expected. The problem is visible because ‘List-style: none’ is not honoured upon opening the page, however if navigate to another page then come back to it using browser’s ‘Back’ button, then ‘List-style:none’ works again.

    Another method that works sometime, is to use Inspect Element on the ‘ul’ element, uncheck 'List-style: none’, then unexpectedly, bullets disappeared as they should (or not?). Very strange.

    We also noticed our Contact page does not suffer this problem, and after some trial & error, we discovered it was because that page uses Google’s ReCaptcha, and there’s recommended Script tag installed at the header. Somehow the recaptha js in the Script tag fixes the problem. Unfortunately we can’t figure out which part of the code in this js makes it work.

    The script tag added is

    Unfortunately, like Aaron M, we’re also unable to product a stripped down version of the page that can reproduce the problem.

    There was not issue when EdgeHTML was at v14 (before Creator Update).

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

  • Hello,

    Thank you for providing this information about the issue. We appreciate any help we can get toward a repro. Please update this case with a reduced code sample or a sample webpage (preferably you can provide a combination of both via a code sharing site like codepen.io or jsfiddle.net).

    Best Wishes,
    The MS Edge Team

  • Hi,

    I have just discovered this bug on my W10 Pro x64 machine.
    Microsoft Edge 41.16299.248.0
    Microsoft EdgeHTML 16.16299

    In my case, it is a website with a sticky header menu on scroll.

    Load this page, scroll, and see the menu stick perfectly: https://www.comedy.co.uk/forums/thread/1961/

    Now load this with an anchor to jump down to a specific point, and the menu renders with discs on the li elements: https://www.comedy.co.uk/forums/thread/1961/#P22264

    Post script: It had been doing that as described, but now I try again it’s rendering correctly. Maybe it is an intermittent bug, or does so on first load of the page? Try the anchor link first.

  • Hello,

    Thank you for providing this information about the issue. It did help to load the page with the anchor tag first. Hopefully, these are all symptoms of the same problem. It is strange that the issue disappears after navigating within the site; perhaps there are some duplicate ID properties on these list elements. If anyone can provide a reduced code sample, please provide it to us.

    Best Wishes,
    The MS Edge Team

  • Microsoft Edge Team

    Changed Steps to Reproduce

    Changed Status from “Not reproducible”

    Changed Assigned To to “wptcomptri”

    Changed Assigned To to “Bogdan B.”

    Changed Status to “Duplicate”

  • Thanks for the report. This is a dupe of a known issue which we are on track to have  fixed in the next release coming out end of 2018. 

  • 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