Why is my position: absolute div placed differently in Edge?

Question

We are trying to have a badge over the corner of a picture. For this we use a parent <div> as wrapper and a <span> inside. It's working fine so far for Chrome, Firefox, and IE11 but in MS Edge it's not working as expected. It seems like Edge calculates the right: property very different from the others.

Result as expected:

Unexpected result:

Here is my code:

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.child {
  background-color: #e2001a;
  position: absolute;
  right: -65px;
  width: 220px;
  height: 50px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  padding-left: 100px;
  display: table;
  z-index: 10;
  color: white;
  text-align: center;
  line-height: 1.2;
}

<div class="parent">
  <span class="child">Some cool text</span>
</div>

Am I doing something wrong, or is the Edge behavior very different from the other browsers?

Althaalthea

Try removing -webkit-transform; Firefox implements it now, IIRC. – Hike

@Pete I tried transform-origin: 20px 20px and still get different results in edge and chrome – Martin

what about this: jsfiddle.net/po1rvmn7 ? – Extrude

@Hike unfortunately removing -webkit-transform does not help – Althaalthea

@TemaniAfif Works just fine can you provide an answer with a short description so I can accept it – Althaalthea

well, I don't have any description to add :) I simply did it differently and it seems to work fine (don't even have edge to test ...) – Extrude

stackoverflow.com/a/37234125 – Symphonist

@Hike Firefox has implemented unprefixed transform for many years. Did you mean to say Chrome or Edge implements it now, instead? – Spraggins

@TylerH: I mean Firefox implemented -webkit--prefixed stuff because people kept using only those. – Hike

@Hike They don't implement -webkit- prefixes for all properties (including this one, I think), but regardless, it doesn't make sense to me to suggest removing a prefixed property because a browser supports that prefix, unless you meant Firefox supports unprefixed transform now? in which case, Firefox supported the unprefixed transform long before it started supporting -webkit- prefixes in version 49, and why single out Firefox, anyway? It supported unprefixed transform before Chrome, Safari, or Edge did... – Spraggins

@TylerH: My guess was that there was a -webkit--only override elsewhere in the CSS or some kind of -webkit-transform-specific behaviour. Since the code worked in Chrome and Firefox (yes, it does implement -webkit-transform), if removing it broke the layout in those browsers, that would be the answer. Just a quick test to eliminate a few possibilities. I mentioned Firefox because it might be unexpected for a -webkit- property to affect its behaviour, whereas it’s not unexpected for Chrome. – Hike

Answer 1

You can do it differently like below, it seems to be fine on Edge*

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.child {
  background-color: #e2001a;
  position: absolute;
  top: 0;
  left: -20px;
  right: -20px;
  height: 50px;
  text-align: center;
  transform: translateX(30%) rotate(45deg) translateY(70%);
  z-index: 10;
  color: white;
  text-align: center;
  line-height: 1.2;
}

<div class="parent">
  <span class="child">Some cool text</span>
</div>

^{* I don't know why...}

Update to work with original code snippet:

transform needs to be changed like above and translateX()and translateY() needed a bit of adjusting to work.

Here's the code that works in Chrome, Firefox, Edge, and IE11:

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.child {
  background-color: #e2001a;
  position: absolute;
  right: -65px;
  width: 220px;
  height: 50px;
  transform: translateX(10%) rotate(45deg) translateY(100%); //wokring with translateX and translateY instead of just rotate
  display: table;
  z-index: 10;
  color: white;
  text-align: center;
  line-height: 1.2;
}

<div class="parent">
  <span class="child">Some cool text</span>
</div>

Extrude

What did you change? Some comments / notes would be tremendously helpful, better than I don't know why... and a blob of code ;) – Symphonist

@cale_b as I already commented, I simply did it differently. You will notice that my code has nothing to do with the OP code, so I changed everything. I don't have edge and I don't know what's the issue, but since it seems to be working I posted this as wiki answer .. feel free to edit the answer if you think there is useful information that need to be added. – Extrude

I'll edit and add what needs changing in the original code. – Althaalthea

It probably has something todo with the answer @cale_b commented but I didn't have the chance yet to verify so I didn't add it to the answer yet – Althaalthea