Page renders incorrectly due to scaling / calc() issues

Issue #11008616 • Assigned to Rick J.

Details

Author
Jonas T.
Created
Feb 20, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

The page https://tethercode.io renders incorrectly due to scaling / calc() issues. I think it is potentially related to the use of CSS variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables which might not be processed correctly.

To see how the page is supposed to look like, use Chromium >= 55 (latest regular release), or Firefox >= 51 (latest regular release). I attached an image named broken.jpg with the faulty Edge rendering, and an attachment named correct.png with the Firefox rendering.

Attachments

Comments and activity

  • Changed Steps to Reproduce

  • Gmail shows the same problem, only in Edge. Opera, Firefox, Chrome, Brave… correct rendering. Edge? Broken.

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

    Changed Assigned To from “Brad E.” to “Steven K.”

  • Changed Steps to Reproduce

  • I changed the homepage link to https://tethercode.io since we moved to another address. However, the rendering issue remains.

  • I think a potentially related issue with calc is that it looks like edge is using Math.round instead of Math.floor when calculating sizes. This causes unintended overflow in some situations.

    I’ve added a couple of screen shots (calc-good and calc-bad). They are both the exact same CSS, all I was doing was resizing the browser window 1 pixel of difference. The items are set as width: calc(100vw / 3) which works properly in all other browsers. The resizing of the window intermittently causing the issue is what leads me to believe this is caused by a rounding error.

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

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

Sign in