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

Fixed Issue #4480068


Sep 4, 2015
This issue is public.
Fixed in build #
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce


Repro Steps:


View the following link for a demo: 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:




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”

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

    Sign in