Скрытая видимость не работает в Microsoft Edge с содержимым CSS: url ();

Question

См. Скрипку: https://jsfiddle.net/8wk0tsnL/8/

Обидная часть такова (работает на FF, Chrome, IE, но не в Edge):

.testclass:after {
  content: url(http://placekitten.com/96/139);
  visibility:hidden;
}

.testclass:hover:after, .testclass:hover:before {
  visibility:visible;
}

Изображение не скрыто в Edge. Если вы замените content: url(...); текстовой строкой content: "example";, в Edge она будет работать нормально.

Это ошибка? Любые известные обходные пути?

(Edge занимает менее 5% рынка браузеров, поэтому я не хочу загрязнять свой код очень экзотическими или редко поддерживаемыми решениями).

Answer 1

Я предлагаю вам использовать свойство непрозрачности, как только вы сможете использовать переход, чтобы сделать его гладким, так как у него есть недостаток, используя непрозрачность, он скрывает элемент, но все еще с активируемой областью.

.testclass:after{
   content: url(http://placekitten.com/96/139);
   opacity: 0;
}

.testclass:hover:after{
   opacity: 1;
}