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?

Try removing `-webkit-transform`; Firefox implements it now, IIRC. — Ry-, Apr 26 '19 at 15:22
@Pete I tried transform-origin: 20px 20px and still get different results in edge and chrome — Alex, Apr 26 '19 at 15:24
@Ry- unfortunately removing `-webkit-transform` does not help — Daniel, Apr 26 '19 at 15:26
@TemaniAfif Works just fine can you provide an answer with a short description so I can accept it — Daniel, Apr 26 '19 at 15:28
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 ...) — Temani Afif, Apr 26 '19 at 15:31
@Ry- Firefox has implemented unprefixed `transform` for many years. Did you mean to say Chrome or Edge implements it now, instead? — TylerH, Apr 26 '19 at 16:09
@TylerH: I mean Firefox implemented `-webkit-`-prefixed stuff because people kept using only those. — Ry-, Apr 26 '19 at 16:14
@Ry- 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 *un*prefixed `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... — TylerH, Apr 26 '19 at 16:23
@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. — Ry-, Apr 26 '19 at 16:41

score 4 · Accepted Answer · edited Apr 26 '19 at 16:10

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>

What did you change? Some comments / notes would be tremendously helpful, better than _I don't know why..._ and a blob of code ;) — random_user_name, Apr 26 '19 at 15:42
@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. — Temani Afif, Apr 26 '19 at 15:52
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 — Daniel, Apr 26 '19 at 16:05

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

1 Answers1