Using transition effects on pseudo elements in IE

Every now and then you want to use a  transition effect to spice up your layout a bit. Imagine for example a folded corner on a container which moves a bit when you hover the container.

In browsers like Chrome and Firefox this does not pose a problem. Just add your transition and you’re done.  In IE on the other hand you will notice that your precious transition will not work at all, if you are targeting a pseudo element like :before and :after. The solution to this is thankfully rather easy. All you have to do, is to set a property on your parent container, in addition to your changes of the pseudo element. This does not have to be a new property, you can just re-set an existing one, for example position like this this snippet:

You cannot apply any changes to :before or :after pseudo elements in IE without also modifying their parent element to trigger a repaint. So despite the headline or this post being related to transitions on pseudo elements, this is a fix for any kind of hover-related change on pseudo elements in IE.

The following pen shows an example. Both sides will work fine in Chrome, Firefox, etc. but the left version will not work in IE. The right one will, though.


See the Pen Pseudo element IE hover transition fix by Amin Poursaied (@johanneslumpe) on CodePen

|  

Leave a Reply

*