CODEWITHSUNDEEP
cssmicrosoft-edge
Dan Gamble
Dan Gamble

Reputation: 4155

Microsoft Edge not respecting certain pseudo elements' CSS

The code in question: http://jsbin.com/bisimeyija/edit?html,css,output

It works fine in Chrome / Safari / Firefox and even IE11 i believe.

HTML

<div class="img-Offset">
  <div class="img-Offset_ImageContainer">
    <img src="http://placehold.it/430x350" alt="">
  </div>

  <p class="img-Offset_Caption">Scott Preston and his wife Laura</p>
</div>

:root {
  --Theme_Primary-dark: #f98183;
}

CSS

.img-Offset {
  position: relative;
  z-index: 1;

  max-width: 520px;
  width: 100%;
}

.img-Offset::after {
  content: '';

  position: absolute;
  top: 90px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;

  display: block;

  background-color: var(--Theme_Primary-dark);
  border-radius: 5px;
}

.img-Offset_ImageContainer {
  position: relative;

  padding-left: 90px;

  border-radius: 5px;
  border-bottom-right-radius: 0;
}

.img-Offset_Caption {
  margin-top: 14px;
  padding-right: 30px;
  padding-bottom: 21px;
  padding-left: 90px;

  font-weight: 500;

  color: #fff;
}

In Edge it looks like: image It should look like: image

So for some reason the border-radius and top aren't working on the pseudo but everything else is.

Upvotes: 2

Views: 1084

Answers (1)

Daniel Finch
Daniel Finch

Reputation: 443

It appears to be a problem relating to the use of CSS variables. If you change the background colour to be a simple hex value, the problem goes away.

Upvotes: 3

Related Questions