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?

CSS `clip-path` won't work in FF. You need to use SVG and `url()` syntax for FF support. IE won't support any version of `clip-path`. You can check browser compatibility at [Can I Use](http://caniuse.com/#feat=css-clip-path). — Harry, Dec 19 '15 at 11:22
I tried something like `` but it doesn't work for some reason. — NineCattoRules, Dec 19 '15 at 11:30
There are lots of questions and answers on this already e.g.http://stackoverflow.com/questions/33816793/clip-path-doesnt-work-in-firefox-values do none of them help you? — Robert Longson, Dec 19 '15 at 11:41
@Simone: [This](https://jsfiddle.net/hari_shanx/j7Lw4m54/) fiddle uses a totally different approach with properties all of which are supported on IE and FF. If you wish to go down this route, I'll help you tune it further. — Harry, Dec 19 '15 at 11:47
@Harry Thanks for this great solution, however is there any chance to have a circle expansion instead of square onhover? — NineCattoRules, Dec 19 '15 at 12:27
@Simone: Unless we use an extra element and some complex stuff, the best that can be achieved is [this](https://jsfiddle.net/hari_shanx/j7Lw4m54/2/). It kind of goes from a circle to an oval and finally turns into a square. — Harry, Dec 19 '15 at 12:33
@RobertLongson I'm not very familiar with `clip-path` but I read some of those solutions and tried from console without any good results — NineCattoRules, Dec 19 '15 at 12:36
@Harry Yes it's better without `border-radius`. Is there a way to display this solution only for browsers FF and IE ( I would like to keep my version for Chrome and Safari) — NineCattoRules, Dec 19 '15 at 12:43
@Simone: Maybe possible with JS but I wouldn't really recommend doing it. It is better to keep it consistent (more of a personal choice though). By the way, would you mind if I add that as an answer? — Harry, Dec 19 '15 at 12:45

score 3 · Accepted Answer · answered Dec 19 '15 at 12:54

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>

Clip-path doesn't work in Firefox and IE

1 Answers1