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

Won’t fix Issue #3342037

Details

Created
Jun 25, 2015
Privacy
This issue is public.
Found in build #
14.14907
Reports
Reported by 8 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.

    • Microsoft Edge Team

      Changed Assigned To from “Christian F.” to “IE S.”

      Changed Status from “Confirmed” to “Won’t fix”

    • Hello,

      Thank you for providing this information about the issue. We found your sample exhibited the same behavior in other browsers. Please update this case if you can provide new information for us to consider.

      Best Wishes,
      The MS Edge Team

    • James M hasn’t supplied a list of browsers and thier results, so I thought I’d start such a thing.

      All these are on Windows 10:

      Chrome 58 - Can’t reproduce
      Firefox 53 - Can’t reproduce

      Edge 38 - Can reproduce
      IE 11 - Can reproduce

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

    Sign in