border-radius causes line of bleed-through of background-color from containing element

Confirmed Issue #3342037 • Assigned to Christian F.

Details

Created
Jun 25, 2015
Privacy
This issue is public.
Found in build #
14.14907
Reports
Reported by 7 people

Sign in to watch or report this issue.

Steps to reproduce

Reduction Fiddhttp://jsfiddle.net/09Lej52w/3/](http://jsfiddle.net/09Lej52w/3/)[http://jsfiddle.net/09Lej52w/3/](http://jsfiddle.net/09Lej52w/3/)

URL:

Repro Steps:

==============

  1. Open http://getbootstrap.com/components/#panels-alternatives  in IE11 on Windows 8.1.

  2. Look at the far right edge of the dark blue "Panel title".

Actual observed incorrect behavior:

There is a light off-white-colored line on the right and/or top edge(s) of the panel. See the red-circled areas in the one screenshot. There are similar rendering artifacts on the other panels too.

Expected Results:

==============

In the example in question, the far right edge of the dark blue “Panel title” area should be dark blue. There should not be any light off-white-colored line on the far right edge of the panel’s title.

More generally, the edges of an element with a border-radius and its own background-color should not have any artifacts where a containing element’s background-color bleeds through.

Actual Results:

==============

Dev Channel specific:

================

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Status to “Confirmed”

    • Note that the reduction contains a potential work-around. Removing the border-radius from the panel-heading appears to resolve this issue. Important to note that this may, or may not, impact rendering in older versions of Internet Explorer.

      See http://jsfiddle.net/09Lej52w/3/ for more details.

    • Removing border-radius from the panel-heading does make the problem in the reduction look better. However, it is still visible because the containing element (panel-primary) also has a border-radius style that is rendered wrong.

      The problem is that border-radius is rendered improperly, so just removing that attribute isn’t really a workaround. The background colors might not be bleeding in anymore, but the element isn’t getting rounded anymore either.

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

    Sign in