Chrome implemented a hack to have transforms affect layout (and Firefox tries to match)

Issue #10259115 • Assigned to Christian F.

Details

Created
Dec 17, 2016
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

https://jsfiddle.net/42x52nep/](https://jsfiddle.net/42x52nep/)[https://jsfiddle.net/42x52nep/](https://jsfiddle.net/42x52nep/)

 

Test case #1

  1. Go to https://shwr.me/
  2. Inspect <body> element
  3. Uncheck clip property
  4. Compare behaviour with Chrome or Firefox

Test case #2 (simpler)

  1. Go to https://jsbin.com/cetuzuj/edit?html,css,output
  2. Add edge class name to <body>
  3. Compare behaviour with Chrome or Firefox

See attached Chrome vs Edge comparison.

This behaviour is critical to Shower presentation engine behaviour and I’ve been lucky to find this workaround a few years back for IE. But I’d love Edge to fix this behaviour instead.

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

    Changed Steps to Reproduce

    Changed Title from “Transform scaling couldn’t be compensated with negative margins” to “Chrome implemented a hack to have transforms affect layout (and Firefox tries to match)”

  • Negative margins never had for effect to supress scrollbars. The easiest way to ahieve what you want is to set overflow-x:hidden on the html/body element.

     

    Since transforms are supposed not to affect layout, our behavior is by design. But since Chrome does seem to be willing to change their behavior and Firefox decided to match them in the horizontal direction, we should probably start matching them too.

     

    https://twitter.com/FremyCompany/status/810944813734334464 and conversation has relevant links.

     

    This is not an easy fix because we now would have to invalidate layout when transform change if the element is contained in a scrollport. Since most transform changes due to animations and transitions are gpu-accelerated, this means we will introduce the same bug as Chrome where the scrollbars only toggle on another invalidation (mouse move if some element has :hover, I guess).

     

    Moving this bug to our composition team because this isn’t really a layout problem.

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

    Changed Assigned To from “Rick J.” to “Christian F.”

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

Sign in