Scroll container not sized according to contents when using transforms

Duplicate Issue #15915938 • See Issue #11841111

Details

Created
Feb 12, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Duplicates
See progress on Bug #11841111
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Visit https://mdittmer.github.io/scroll-bug/table.html in Edge, and in Chrome, Safari, or Firefox
  2. Note the small scrolling area realized in Edge and the large scrolling area in Chrome/Safari/Firefox

This issue (and a different Firefox issue related to the same link) is discussed here: https://github.com/mdittmer/scroll-bug

The test page uses an absolutely positioned element inside the scroll container to establish the intended size of the container. The small amount of scrolling possible in Edge appears to be due to data rows that are laid out below the bottom of the container (i.e., the single element meant to establish to total height appears to be ignored).

It appears that this issue is fixed when content is added to the height-establishing element. (See https://github.com/mdittmer/scroll-bug/tree/edge-fix and/or https://github.com/mdittmer/scroll-bug/commit/2bf37548d98d96e1c876e695729481289c9cd083 )

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Title from “Scroll container not sized according to contents” to “Scroll container not sized according to contents when using transforms”

    • Thanks for bringing this to our attention. 

      The problem you faced is caused by the fact you are using a transform to move the element. Transforms are supposed to be gpu-accelerated, but if changing a transform can potentially make a scrollbar appear/disappear/update, then they are not gpu-accelerable anymore. 

      Chrome has built a pipeline to detect this and fallback to non-accelerated transforms in this case but Edge isn’t doing that, though we may end up having to match at some point due to webcompat.

      I would recommend you use position:relative; top:59000px; instead of transforms, that should do the trick because top is layout property, and hence expected to affect layout (including scrollable bounds).

      Let me know if you have other concerns,
      Francois

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Status to “Duplicate”

    • This bug has marked as duplicate. Please follow the parent issue to get new updates.

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

    Sign in