Safari on Windows doesn't like outline inside of :after

Here's a weird edgecase and a little detail on how this issue breaks down

Here is a really strange edgecase of browser support for you, Safari on Windows doesn't like outline when it is called inside the :after pseudoselector.

The first thing to note is that Apple have stopped supporting the Safari browser on Windows (I learned this today from Chris at ExamTime) so this probably isn't something that is going to be high on your to-fix list even if this did crop up in production. I am simply blogging about it because I couldn't find reference to it anywhere on the net and was starting to think I was imagining things.

So this is how the issue breaks down.

  • Safari (assume I mean on Windows unless I say otherwise) supports :after
  • Safari supports outline
  • Safari does not support outline when called inside :after
  • Safari does support border when called inside :after (which basically does the same thing)
  • Internet Explorer 8 does not support border when called inside :after (but does support outline)

This makes little sense to me, I have heard of browsers not supporting certain properties and certain selectors, but not a combination. Here is some code you can use to verify;


<html>
 <head>
  <style>
   .test:after { outline: green solid 1px; position:absolute; top:0; bottom:0; left: 50%}
  </style>
 <head>
 <body>
  <div class="test"></div>
</html>

Mental.


Recent posts View all

Ruby

How to ignore Bullet in RSpec tests

Using Bullet during a test can pick up mistakes but also has false negatives; here is an easy way to ignore them

Ruby

How we used Nokogiri to fix a sizing issue in YouTube's oEmbed

At some point, one of our calls to YouTube's oEmbed endpoint was returning videos way too small; we fixed in in our Rails application by using Nokogiri