Rotated element inside overflow: auto container causes a horizontal scrollbar to appear when it shouldn't

Issue #15645603 • Assigned to Bogdan B.

Details

Author
Matt P.
Created
Jan 26, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

See this fiddle to confirm the issue: https://jsfiddle.net/ws9r9vmp/

HTML:
<div class="container">
<div class="inner">
</div>
</div>

CSS:
.container {
height: 400px;
width: 800px;
overflow: auto;
}

.inner {
height: 400px;
width: 1000px;
background-color: blue;
transform: rotate(90deg);
transform-origin: 200px 200px 0;
}

A vertical scrollbar should be visible, but in Edge and IE11 there is also a horizontal scrollbar visible. Presumably this is caused by the rotated element even though after being rotated it shouldn’t cause a horizontal scrollbar to appear.

You can load the fiddle in other browsers like Chrome, Firefox and Safari and the horizontal scrollbar is not visible.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “wptcomptri”

      Changed Assigned To to “wptrentri”

      Changed Assigned To from “wptrentri” to “Matt R.”

      Changed Assigned To to “Bogdan B.”

    • hi all Devs, I cheeked the issue and u can do styles like below.
      .container {
      height: 400px;
      width: 800px;
      overflow-x: auto;
      position: relative;
      }

      .inner {
      height: 400px;
      width: 1000px;
      background-color: blue;
      transform: rotate(90deg);
      transform-origin: 200px 200px 0;
      position: absolute;
      left: 0;
      }

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

    Sign in