Page crash when CSS clip-path uses Custom Properties

Duplicate Issue #11975071 • See Issue #8865594

Details

Author
Dan W.
Created
May 10, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #8865594
Found in build #
15
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

When a site’s CSS has a clip-path that uses a Custom Property such as:

div {
  --y: 0%;
  clip-path: polygon(0% 0%, 100% var(--y), 50% 100%);
}

The page won’t load and displays the message “This page is having a problem loading.”

Demo:
http://codepen.io/danwilson/pen/jmZgJW

Edge properly ignores clip-path (since it is not yet supported) when there are no variables. So clip-path: polygon(0% 0%, 100% 0%, 50% 100%) does not prevent the page from loading. It appears to only happen when a CSS Variable is introduced inside the clip-path value.

Attachments

0 attachments

    Comments and activity

    • I first discovered this bug working on this art project: Single Div Accordion. I have since changed that to use @supports which kept it from crashing. But there are multiple other issues preventing it from rendering properly in Edge still, that I assume are related to: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/ since it has a lot of variables inside pseudoelements.

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Lee H.”

      Changed Assigned To to “Bogdan B.”

      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