Clip-path doesn't work in Firefox and IE

Question

I have a nav element that on mouse hover reveal my menu, it works fine on Safari and Chrome however not in Firefox nor in IE:

/* start nav menu morph */

nav {
  width: 23%;
  background: #222222;
  color: rgba(255, 255, 255, 0.87);
  -webkit-clip-path: circle(16px at 30px 24px);
  clip-path: circle(16px at 30px 24px);
  -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
  transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
}
nav:hover {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.75s;
  transition-duration: 0.75s;
  -webkit-clip-path: circle(500px at 225px 24px);
  clip-path: circle(500px at 225px 24px);
}
nav a {
  width: 100%;
  display: block;
  line-height: 50px;
  padding: 0 20px;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
nav a:hover {
  background: #ffe082;
}
nav a:active {
  background: #ffca28;
}
.nav-sim {
  position: absolute;
  right: 0;
  top: -6px;
}
.navicon {
  padding: 23px 20px;
  cursor: pointer;
  -webkit-transform-origin: 32px 24px;
  -ms-transform-origin: 32px 24px;
  transform-origin: 32px 24px;
}
.navicon div {
  position: relative;
  width: 20px;
  height: 2px;
  background: rgb(254, 70, 70);
}
.navicon div:before,
.navicon div:after {
  display: block;
  content: "";
  width: 20px;
  height: 2px;
  background: rgb(254, 70, 70);
  position: absolute;
}
.navicon div:before {
  top: -7px;
}
.navicon div:after {
  top: 7px;
}
.fa-sim {
  font-size: large;
  margin-left: 5px;
}
/* end nav menu morph */

<noscript>
  <style>
    #navmenusim {
      display: none;
    }
  </style>
</noscript>
<nav class="nav-sim" id="navmenusim">
  <div class="navicon">
    <div></div>
  </div>
  <a href="#" class="" rel="">Home<i class="fa fa-home icon i-sim fa-sim"></i></a>
  <a href="#" class="" rel="">Blog<i class="fa fa-rss icon i-sim fa-sim"></i></a>	
  <a href="#" class="" rel="">Contact<i class="fa fa-mail icon i-sim fa-sim"></i></a>	
</nav>

The menu in Firefox and IE is always visible, the clip-path doesn't work. How to fix it?

Answer 1

As mentioned in my comment to the question, CSS clip-path won't work in Firefox. You would need to use SVG along with url() syntax for Firefox support. IE (even 11 and Edge) supports neither the CSS or SVG version of clip-path. You can check browser compatibility chart at Can I Use.

You can make use of the max-width, max-height, border-radius and overflow properties to sort of get a similar output to what you need. Below is a sample snippet which should work in all browsers.

/* start nav menu morph */

nav {
  margin-top: 10px;
  width: 23%;
  background: #222222;
  color: rgba(255, 255, 255, 0.87);
  max-height: 50px;
  max-width: 50px;
  border-radius: 50%;
  overflow: hidden;
  transition: max-height .375s, max-width .375s, border-radius .125s .25s;
}
nav:hover {
  max-height: 500px;
  max-width: 500px;
  border-radius: 0%;
  transition: max-height .75s ease-out, max-width .75s ease-out, border-radius .75s ease-out;
}
nav a {
  width: 100%;
  display: block;
  line-height: 50px;
  padding: 0 20px;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
nav a:hover {
  background: #ffe082;
}
nav a:active {
  background: #ffca28;
}
.nav-sim {
  position: absolute;
  right: 0;
  top: -6px;
}
.navicon {
  padding: 23px 20px;
  cursor: pointer;
  -webkit-transform-origin: 32px 24px;
  -ms-transform-origin: 32px 24px;
  transform-origin: 32px 24px;
}
.navicon div {
  position: relative;
  margin-left: -5px;
  width: 20px;
  height: 2px;
  background: rgb(254, 70, 70);
}
.navicon div:before,
.navicon div:after {
  display: block;
  content: "";
  width: 20px;
  height: 2px;
  background: rgb(254, 70, 70);
  position: absolute;
}
.navicon div:before {
  top: -7px;
}
.navicon div:after {
  top: 7px;
}
.fa-sim {
  font-size: large;
  margin-left: 5px;
}
/* end nav menu morph */

<nav class="nav-sim" id="navmenusim">
  <div class="navicon">
    <div></div>
  </div>
  <a href="#" class="" rel="">Home<i class="fa fa-home icon i-sim fa-sim"></i></a>
  <a href="#" class="" rel="">Blog<i class="fa fa-rss icon i-sim fa-sim"></i></a> 
  <a href="#" class="" rel="">Contact<i class="fa fa-mail icon i-sim fa-sim"></i></a> 
</nav>