Border width is not rounded correctly when page is zoomed

Issue #14444358 • Assigned to bbrinza

Details

Author
Kuba F.
Created
Oct 30, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Chrome
  • Firefox
  • Opera
Found in build #
40.15063
Reports
Reported by 1 person

Sign in to watch or report this issue.

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:

  1. Create new block element.
  2. Put border 5px style on it (also breaks for every integer not divisible by 4).
  3. 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).

Actual results:

Border’s width was not rendered properly (as seen on screenshot in attachment - result.png) - can’t say what caused it.

Expected results:

Rendered border width should be the same as written in CSS, especially for values without floating point.

Attachments

1 attachment

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”

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

Sign in