Search code examples
cssvisibilitymicrosoft-edgehidden

Visibility hidden does not work on Microsoft Edge with CSS content: url();

See Fiddle : https://jsfiddle.net/8wk0tsnL/8/

The offending part is this (works on FF, Chrome, IE, but not in Edge) :

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

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

The image is not hidden in Edge. If you replace the content: url(...); with a text string content: "example";, it works fine in Edge.

Is this a bug ? Any known workarounds ?

(Edge has less than 5% browser market share, so I do not want to pollute my code with very exotic or sparsely supported solutions).

Solution

  • i suggest for you use opacity property once you can use transition to make it smooth, by the way it have a downside using opacity it's hide the element but still with the clickable area.

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

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