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

Issue #9513209 • Assigned to Christian F.

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

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

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

    Sign in