Pattern in SVG disappears at various scales

Confirmed Issue #9200893 • Assigned to Kevin B.


Jason C.
Oct 5, 2016
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce


When an SVG element (in the example below, a rect) uses a pattern as background, lines declared in the pattern sometimes do not show up at some zoom levels (as defined by the CSS “scale” attribute). This is especially problematic because sometimes the lines do not show up at normal scale.

Only one such sample is shown in the below CodePen. Some others showed only one of two lines defined in the pattern at specific zoom levels, while still others disappeared completely between 50% and 90% zoom.

Steps to reproduce

Sample CodePen

Step 1

Change the textbox to 100

Step 2

Click on the “zoom” button


2 attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Ibrahim O.”

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Kevin B.”

    Changed Status to “Confirmed”

  • Here is a simpler repro:
    This one does not involve Javascript and does not involve CSS transforms - pure SVG where EDGE refuses to render the pattern at many scales.

  • Is this fixed? I can still see that Edge does not render properly.

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

Sign in