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 12 people

Sign in to watch or report this issue.

Steps to reproduce

Reduction Fiddle: 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

    • I am facing same issue, is there any solution for this?

    • We recently updated our OS at work to Win 10 Version 1709 OS Build 16299.492 at work and IE 11 and Edge (vers. Microsoft EdgeHTML 16.16299 and Microsoft Edge 41.16299.492.0) seem to have this problem again. Anything with a corner-radius and a background-color make the issue very visible.
      https://news.google.com/?hl=en-US&gl=US&ceid=US:en for example.

      Lines from the beginning of the corner radius curve are drawn across the center (masking the content) in the shape of an 'X’.

      I don’t see this on any non-microsoft browsers.

    • I believe I am facing this issue in Edge and IE11 too.

      Specifically I have a div with a background color and border-radius set so the element displays as a circle. In IE11 and Edge the background color seems to bleed through some sections of the border radius to show what looks like a “flat” section of the circle circumference.

      Codepen link - https://codepen.io/TimHacker/pen/mGqwEK
      (you may have to change the top value of the div slightly to see the issue as it seems dependent on the position of the element within the browser window, potentially suggesting a pixel rounding issue).

      This does not occur in other browsers (testing in various versions of Chrome and Firefox).

    • I have another test case for this: https://codepen.io/Faberoga/pen/NLyGjE

      It can be reproduced in Edge.

      In my test case, the element with the border radius is the purple button and it’s preceded by an SVG (I cutted it to a simple line to reduce casualties, but if it was a span with some text or a void div with some padding the bug does not occurs, it needs to be an SVG).

      The button itself has 39px of height: if I change it to an even number (until 50) the bug does not occur, if I change it to an odd number the bug occurs again.

      So yea, it really seems like some pixel rounding issue

    • I have found the solution to my issue. I updated my intel integrated graphics driver and IE rendered everything just fine - did this 07/2018.

      https://www.intel.com/content/www/us/en/support/products/80939/graphics-drivers.html

    • The issue and the solution described by Andrew has nothing to do with the issue we’re describing here.

      Try to open my codepen or the codepen from Marc P. and you will see that it’s persisting even with your updated driver

      I tried with different pcs with different processors all with drivers up to date and it’s definitely an Edge issue

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

    Sign in