css "filter: drop-shadow" & css "dox-shadow" will not render on the same page.

Issue #9513209 • Assigned to Rick J.

Details

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

Sign in to watch or report this issue.

Steps to reproduce

check this fiddle here https://jsfiddle.net/u1ne5t2g/11/

Although on a different element when a css box-shadow is applied on the page the filter: drop-shadow applied on the image does not render. If we remove the box-shadow from the other element it comes back.

the html

<div>
   <img class="drop-shadowed" src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Microsoft_logo_(2012)_modified.png" />
   
   <div class="box-shadowed">
      <p>
         <h4>
             This will have a rectangular shadow arround it.
         </h4>
       
         the following image is transparent should have a css3 filter <em>drop-shaddow</em> applied. 
         If we remove the css3 <em>box-shadow</em> effect that is applied on the adjustened element 
         the shadow will appear. It works in other browsers but not in MsEdge.
      </p> 
   </div>
</div>

css

.drop-shadowed {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}

.box-shadowed {
    background-color: #999;
    color: #fff;
    padding: 10px;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.8);
}

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Rick J.”

    • I had the same surprise issue with an external SVG image thinking filter was fully supported. I assume the drop-shadow filter is missing from the filter implementation shipped with Edge 13.

      Rick, Since you are assigned on this.
      Could you share what Edge version the patch/fix is planned for, if you already know?
      Would be useful for my fallback code expectation and making additional notes on caniuse.com
      Thanks

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

    Sign in