Styling based on :target pseudo-selector breaks hash navigation

Confirmed Issue #8271689 • Assigned to Kevin B.

Details

Author
Nolan L.
Created
Jul 25, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14385
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Put <div>s with ids on a page.
  2. Add some links to those divs using hash links (e.g. #foo).
  3. Style the divs based on the :target pseudo-selector.
  4. Note that you can click on those links, but you can’t go back/forward using the browser back/forward buttons. The divs do not properly update their style.

Attached is a page that demonstrates this (index.html). Note that this page works perfectly in Firefox, Chrome, and Safari. you can click the links, press back and forward, and the modals disappear and reappear as expected.

Here is a live example: http://bl.ocks.org/nolanlawson/raw/10ee1546030d36a3f1da64255c7b52cf/

The bug seems to be caused by the :target styling. Removing this styling causes Edge to function the same as other browsers. Here is a live example of that: http://bl.ocks.org/nolanlawson/raw/483791e06cb2a59ad9e576ffdff89d1c/ (also attached as working.html).

Attachments

2 attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Rossen A.”

    Changed Status to “Confirmed”

    Changed Assigned To from “Rossen A.” to “Kevin B.”

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

Sign in