Strange UI with border-radius

Issue #6661381 • Assigned to Christian F.

Details

Created
Feb 24, 2016
Privacy
This issue is public.
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

URL:  https://jsfiddle.net/z0c9y2rb/

Repro Steps:

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

Below is the code to reproduce this issue

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>test</title>

<style>

body {

background-color: #000;

color: #0D0;

}

.test {

display: block;

width: 100%;

padding: 0;

margin: 0;

}

.test div {

background-color: #FFF;

display: inline-block;

height: 50px;

border-radius: 0;

padding: 0;

margin: 0;

}

.test div.d1{

width: 10%;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

}

.test div.d2{

width: 80%;

}

.test div.d3{

width: 10%;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

}

.test div.d {

border-radius: 0;

}

</style>

</head>

<body>

<h1>Using border radius</h1>

<div class="test">

<div class="d1"></div><div class="d2"></div><div class="d3"></div>

</div>

<h1>Not using border radius</h1>

<div class="test">

<div class="d1 d"></div><div class="d2"></div><div class="d3 d"></div>

</div>

</body>

</html>

Expected Results:

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

UI is displayed well as the other browsers

Actual Results:

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

Dev Channel specific:

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

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Sermet I.”

      Changed Assigned To to “Christian F.”

      Changed Steps to Reproduce

      Changed Assigned To from “Christian F.” to “Steven K.”

      Changed Assigned To from “Steven K.” to “Christian F.”

    • Here is a somewhat smaller sample code that shows a similar issue : https://jsfiddle.net/9ryf1unw/
      In my case though, the extra border will fade in and out as you resize the window vertically.

    • Oh! By the way, my issue is also present in IE11 on Windows 10.

    • Was able to reproduce with trivial example provided by Bruno G.
      Transparent line appears and dissapears when resizing window.
      Windows 7 + IE11.
      Any updates from Microsoft regarding this issue? Or at least a workaround?

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

    Sign in