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

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?

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>