nuxodin/ie11CustomProperties

Issue with ::before and ::after pseudo elements

qqilihq opened this issue · 10 comments

qqilihq commented

First: Many thanks for making this -- looks like this will save us quite some time!

I'm encountering a problem with CSS ::before and ::after elements. Minimal example follows using the latest version from the master branch:

index.html:

<html>
<head>
  <script src="https://rawcdn.githack.com/nuxodin/ie11CustomProperties/40dddac11e14fda350d0f918f6039f80cde090e3/ie11CustomProperties.js"></script>
  <link href="./styles.css" rel="stylesheet"></head>
</head>
<body>
  <div></div>
</body>
</html>

styles.css:

:root {
  --red: red;
  --green: green;
  --blue: blue;
}

div {
  position: relative;
  width: 600px;
  height: 200px;
  background-color: var(--red);
}

div::before,
div::after {
  content: "";
  position: absolute;
  width: 33.4%;
  height: 100%;
}

div::before {
  left: 33.4%;
  background-color: var(--green);
}

div::after {
  left: 66.6%;
  background-color: var(--blue);
}

This is supposed to create three squares in red, green, and blue. Screenshot from Chrome, Edge, etc. looks as follows:

image

When rendering in IE with the polyfill, I see the following:

image

The generated CSS code looks as follows:

image

Any ideas what's wrong here?

nuxodin commented

Thank you for your feedback!

Yes, IE has a bug, where unknown properties at pseudo-selectors are computed at the element and not at the pseudoelement.
This meens, you can set propertys for pseudo-elements, but the property is used by ::before, ::after and the Element itself.

Its complicated to fix this issue, at the moment I do not have enough time and nerves to fix it.

qqilihq commented

I understand -- thank you for the clarification!

In the end I went for a different polyfill which worked for my use case. Anyways, I’d suggest to keep this ticket open as it might be helpful for others and contains the test case?

  • 🎉1
karungn1 commented

@qqilihq I have similar problem and problem with SVG path's fill and stroke (sample attached below). Please suggest the polyfill you have used.

			```

path {
&.stroke {
stroke: var(--agentMsgDisabledBorder);
}
&:not(.stroke) {
fill: var(--agentMsgBg);
}
}
}

nuxodin commented

@karungn1
Maybe your issue is this one fixed resently?
#15
Do you have the latest version?

3SCadmin commented

This issue had me guessing for a whole afternoon.

  • You can create pseudo elements with JS,
  • but you can't manipulate them afterwards (not part of DOM)

One way around this is:

  • declare CSS variables on elements you can manipulate (body)
  • in the pseudo element styling reference these variables
  • use document.querySelector("body").style.setProperty() to change the CSS variables

That's where I was at when I tested this polyfill. I could see that .setProperty() was supported and working in your example. I just couldn't replicate the functionality in my test scenario... because my scenario had psuedo elements in it :)

Please please add this piece of the puzzle to ie11CustomProperties.js

nuxodin commented

Sorry, at the moment, its a too big puzzle for my spare time....

happy2deepak commented

In the end I went for a different polyfill that worked for my use case

@qqilihq - can you please help me with the Polyfill you used? Even I'm facing the exact same issue.

happy2deepak commented

Thanks a lot @qqilihq . But yes 11000 websites are using this current polyfill and there's a no fix on this since last year. It is strange.
cc: @nuxodin - can you help us out buddy ?

Update:
Just found out that if you use an !important on the parent of psuedo-element (::after, &::before), it doesn't cause this issue on IE. But it is not a good practice for bigger projects. Though won't harm a small website.

benm-eras commented

@happy2deepak could you provide a little example of what you meant in your update there? I am not sure what you mean.