Anti-aliasing on an element's edges ignores its box shadow

Fixed Issue #105721

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Found in build #
0.0011
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL = http://jsfiddle.net/jimrajabally/beYn5/6/

URL:

Repro Steps:

Please view the test case: http://jsfiddle.net/jimrajabally/beYn5/6/

To reproduce it from scratch, simply create an HTML element that has the following characteristics:

  1. A background color that contrasts sufficiently with the background of its parent element.
  2. A box-shadow that also contrasts sufficiently with the background of its parent element.

NOTE: It is better if the shadow envelops the element in all directions (i.e. box-shadow: 0 0 0 10px gray) so that you can see on which sides the outline will appear.

  1. An outline will appear between the edge of the element (where the border would be, if it had one) and its shadow. The outline appears in the top/left sides.
  2. If you set a border radius other than zero, it will appear on the right/bottom sides and on the rounded corners themselves.
  3. Specifying a border has no effect on the underlying problem. The border can hide the outline when using rounded corners, but if you set the border-style to dotted, you can see that the outline is still there underneath.

Expected Results:

There should be no outline at all. This breaks some designs as it looks ugly under some circumstances.

Actual Results:

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brian M.”

      Changed Assigned To from “Brian M.” to “IPBS P.”

      Changed Status to “Fixed”

      Changed Assigned To from “IPBS P.” to “Christian F.”

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

    Sign in