Page renders incorrectly due to scaling / calc() issues

External Issue #11008616

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.

Similar issue observed on URL : https://www.mozilla.org/en-US/developer/css-grid/?utm_source=desktop-snippet&utm_campaign=CSSgrid&utm_medium=snippet&utm_term=6573&utm_content=rel&sample_rate=0.01&snippet_name=6573

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.”

    Changed Steps to Reproduce

    Changed Assigned To to “Rick J.”

    Changed Steps to Reproduce

    Changed Steps to Reproduce

    Changed Assigned To to “Bogdan B.”

    Changed Status to “External”

  • Thanks for your bug report! Edge does not support calc() in rotate and scale, so that would make sense.

  • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

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

Sign in