1px dotted border render in IE11/Edge

Question

Noticed that in IE11/Edge 1px dotted border renders with some issues, in some parts of input it's brighter and in some - darker.

input {
  display: block;
  height: 23px;
  vertical-align: middle;
  font-size: 13px;
  margin: 0;
  min-width: 500px;
  padding: 0 10px;
  margin: 15px 0;
  color: #C2C2C2;
  background: #000000;
  border: 1px dotted black;
}

Image with 1px dotted border even if I increase border -> 2px, the problem still exists.

Chrome/FF looks fine, is that an easy way to solve this, not changing the border type? https://jsfiddle.net/eehLaogk/11/ (open in IE11/Edge)

I don't have Edge with me so I can't test, but from the looks of it, it looks like a browser bug. So kudos in finding. Want to file a bug report? https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ — Praveen Puglia, Jun 07 '16 at 11:29

score 1 · Accepted Answer · answered Jun 07 '16 at 12:01

It does seem to be a browser bug. I can confirm on IE11/Win7 and it affects other elements, not only input fields.

After some testing I found out that the problem occurs when the element's dimensions are even numbers, e.g. 500px wide or 40px high.

Using odd numbers like 501px wide and 41px high is a temporary workaround:

body {
 background: #181818;
}

input {
    display: block;
    padding: 0 10px;
    height: 40px;
    margin: 15px 0;
    color: #C2C2C2;
    background: #000;
    border: 1px dotted #FFF;
    outline: none;
    width: 500px;
}

#input2 { width: 501px; height: 41px; }

<input id="input1" type="text" placeholder="500px wide (even)">
<input id="input2" type="text" placeholder="501px wide (odd)">

Checked with IE11/Edge on Win10 and it works with odd height/width of input. Thanks. — dieTrying, Jun 07 '16 at 13:24
Someone has reported the bug here : https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18916402/ — Aman Srivastava, Dec 28 '18 at 10:04

1px dotted border render in IE11/Edge

1 Answers1