TranslateX(-50%) causes appearing horizontal scroll, even if element don't beyond parent's boundary

Issue #13475965 • Assigned to bbrinza

Details

Author
Timofey M.
Created
Aug 28, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

Leave example https://jsfiddle.net/qkbt4d9a/

HTML

<div class="container">
  <div class="line"></div>
</div>

CSS

.container {
  border: 1px solid salmon;
  width:  500px;
  height: 700px;
  position: relative;
  overflow: auto;
}

.line {
  background: skyblue;
  height: 100px;
  width: 400px;
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
}

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • Hi,

    Can you give me the version on Windows you are seeing this issue?  Win + S and then enter 'winver’.  I am not able to repro this in 15063.608.

    Can you take a screenshot of the issue to make sure we are on the same page?

    Appreciate the help,

    Steve

  • Hi! I have the same version of OS (v.1703, build 15063.608). I’ve attached two screenshot.

  • I can repro on 15063.608 and 16362.1000 . I’ve attached the screenshot and repro file.

  • Microsoft Edge Team

    Changed Assigned To to “bbrinza”

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

Sign in