Steps to reproduce
Found in build:
Microsoft Edge 40.15063.0.0
Microsoft EdgeHTML 15.15063
Steps to reproduce:
One test case available on codepen.
Basically there is one absolute positioned div with a 50px yellow border and second a div below first one with width=50px, background:black - as you can see elements doesn’t perfectly overlap each other - as they should.
Another way to reproduce this behaviour would be as follows:
- Create new block element.
- Put border 5px style on it (also breaks for every integer not divisible by 4).
- Look at div’s border width in inspector - it’s calculated as 4.8px (for 5px test case).
From other useful informations bug is happening on windows 10 with scaling 125% enabled in system settings screenshot.
Also, same bug was happening in chrome and was addressed in last few months (link to issue on chromium bugtracker).
For future - bug is also reported on [https://bugzilla.mozilla.org/show_bug.cgi?id=1413021](Firefox bugzilla).
Border’s width was not rendered properly (as seen on screenshot in attachment - result.png) - can’t say what caused it.
Rendered border width should be the same as written in CSS, especially for values without floating point.
Comments and activity
Ah, I forgot one thing - you can observe bug only if you zoom in the page by 130% (with use of ctrl + mouse scroll).
- Microsoft Edge Team
Changed Assigned To to “James M.”
Changed Assigned To to “bbrinza”