Rendering CSS filter breaks when appending HTML elements to page dynamically

Issue #9562973 • Assigned to Christian F.


Luis Á.
Oct 27, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

We are working on an app that relies on applying the “invert” filter to an <img> element that is used as "background". After careful testing, we found out that the filter no longer works on the image as soon as dynamic elements (e.g. div/img nodes) are appended to the HTML document.
Additionally, both the background img and the child nodes are “absolute” positioned.
Please check the attached zip, which contains the index.html that reproduces the issue. If you comment out line 46, the issue goes away, and the background image is inverted – but this breaks with the overall purpose of the page, which is to show an animation of dynamically-created icons.


1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

    Changed Assigned To to “Rick J.”

    Changed Assigned To from “Rick J.” to “Christian F.”

  • I have found a similar problem when using dynamic images, i.e. images created in JavaScript and appended to the DOM via JavaScript. If an image is added dynamically to the DOM, the CSS filter does not get applied. Adding an inline style in the developer tools also does not work either. If an image tag with the exact same src and classes set is added to HTML file, instead of being created by JavaScript, the filter works perfectly.

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

Sign in