CSS translateX isn't calculated correctly when its container is resized

Fixed, not yet flighted Issue #4480068

Details

Created
Sep 4, 2015
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

==============

View the following link for a dehttp://jsfiddle.net/stowball/hour8jto/](http://jsfiddle.net/stowball/hour8jto/)[http://jsfiddle.net/stowball/hour8jto/](http://jsfiddle.net/stowball/hour8jto/)

Add the following HTML and CSS to an empty HTML file:

<div class="centered">Resize my window and<br> I should always be centered</div>

div {

background: #000;

color: #fff;

display: inline-block;

left: 50%;

margin: 10px 0;

padding: 20px;

position: relative;

transform: translateX(-50%);

text-align: center;

}

Resize the window’s width and you’ll see that it is no longer centered.

Expected Results:

==============

The element should be perfectly centered at all times, as it is in Chrome, Firefox and Safari,

Actual Results:

==============

Dev Channel specific:

================

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

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

      Changed Steps to Reproduce

      Changed Status to “Confirmed”

      Changed Assigned To from “Rick J.” to “Rahul A.”

      Changed Assigned To from “Rahul A.” to “Rick J.”

      Changed Assigned To from “Rick J.” to “Olga G.”

      Changed Status from “Confirmed” to “In code review”

      Changed Status from “In code review” to “In progress”

      Changed Assigned To from “Olga G.” to “IE S.”

      Changed Status from “In progress” to “Fixed, not yet flighted”

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

    Sign in