CODEWITHSUNDEEP
htmlcsscss-transitions
Poootaatoooo
Poootaatoooo

Reputation: 316

CSS Transition broken in Firefox

So I have a simple little page with a popout sidebar.

When you click the menu icon (the 3 bars), it uses transitions to make the potato and menu icon move/change.

When the navigation bar is opened, the transitions work fine in all browsers, but when closed, all the transitions work fine in all browsers, except in Firefox, where the 3 bars are not animated and just jump back.

I'd like to provide more info, but I really have no idea what else to say.

$(".open").click(function() {
  window.location = "#menu";
  history.pushState("", document.title, window.location.pathname);
  $(".bars").toggleClass("change");
});
$(".close").click(function() {
  window.location = "#";
  history.pushState("", document.title, window.location.pathname);
  $(".bars").toggleClass("change");
});
@import url(//fonts.googleapis.com/css?family=Open+Sans);
* {
  margin: 0;
  padding: 0;
}

body {
  background: #f4f4f4;
  font-family: 'open sans', serif;
}

header {
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}

.potato {
  position: fixed;
  z-index: 2;
  width: 75px;
  margin: 19.125px;
}

.potato:hover {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  cursor: pointer;
}

.potato:active {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.75));
  cursor: pointer;
}

#title {
  color: #0d8aed;
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}

#content {
  background: #fff;
  color: #0a6ebd;
  font-size: 20px;
  padding: 10px 20px;
  width: 75%;
  min-height: 500px;
  margin-top: 125px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
}

#menu a {
  text-decoration: none;
}

.nav-control {
  float: right;
  width: 100%;
  transition: width 0.4s ease;
}

#menu {
  position: fixed;
  z-index: 4;
  top: 0;
  width: 0;
  height: 100%;
  background: #e9e9e9;
  overflow-y: auto;
  transition: width 0.4s ease;
}

#menu a {
  color: #000;
  display: block;
  text-align: center;
  padding: 15px;
}

#menu a:hover,
#menu a:focus {
  color: #fff;
  background: #0d8aed;
}

.close {
  display: none;
}

#menu:target {
  width: 10%;
}

#menu:target + .nav-control {
  width: 90%;
}

#menu:target + .nav-control .open {
  display: none;
}

#menu:target + .nav-control .close {
  display: block;
}

p {
  padding-bottom: 15px;
}

.bars {
  display: inline-block;
  position: absolute;
  top: 32px;
  left: 42px;
  z-index: 5;
  -webkit-transition: 0.4s ease;
}

.bar1,
.bar2,
.bar3 {
  top: 0;
  left: 0;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 6px 0;
  -webkit-transition: 0.4s ease;
}

.bars.change {
  left: calc(10% + 43px);
  top: 34px;
  transition: 0.4s ease;
}

.change .bar1 {
  transform: rotate(-45deg) translate(-5.75px, 4px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: rotate(45deg) translate(-7.8px, -7.8px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header>
  <nav id="menu">
    <a href="javascript:void(0);">Home</a>
    <a href="javascript:void(0);">Link1</a>
    <a href="javascript:void(0);">Link2</a>
    <a href="javascript:void(0);" class="close">Current</a>
  </nav>
  <div class="nav-control">

    <a href="javascript:void(0);" class="open">
      <div class="bars">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
      <img class="potato" src="https://www.limitlovespotato.es/potato.png">
    </a>

    <a href="javascript:void(0);" class="close">
      <div class="bars">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
      <img class="potato" src="https://www.limitlovespotato.es/potato.png">
    </a>

  </div>
  <h1 id="title">HEADER TITLE</h1>
</header>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pugnant Stoici cum Peripateticis. Si quae forte-possumus. Aufert enim sensus actionemque tollit omnem. Restinguet citius, si ardentem acceperit. </p>

  <p>Id enim natura desiderat. Num quid tale Democritus? Equidem e Cn. Sed haec in pueris; </p>

  <p>Recte dicis; Videamus animi partes, quarum est conspectus illustrior; At multis se probavit. Conferam tecum, quam cuique verso rem subicias; </p>

  <p>Fortemne possumus dicere eundem illum Torquatum? Equidem e Cn. Itaque hic ipse iam pridem est reiectus; Hic nihil fuit, quod quaereremus. Est, ut dicis, inquit; Quare conare, quaeso. </p>

  <p>Cave putes quicquam esse verius. Quid adiuvas? Duo Reges: constructio interrete. Neutrum vero, inquit ille. Minime vero, inquit ille, consentit. Cur iustitia laudatur? </p>
</div>

Upvotes: 0

Views: 479

Answers (2)

Poootaatoooo
Poootaatoooo

Reputation: 316

Turns out it was a problem with jquery's toggleclass, which pretty much disabled the transition, weird that it was only in firefox on a single transition though.

Anyway, I solved this by adding jquery ui(I didn't need the whole library, just the js file), since jquery ui adds a duration option to toggleclass, which I set to 400, since all my transitions are 0.4s.

Upvotes: 0

Brieuc Caillot
Brieuc Caillot

Reputation: 92

In order to make it works on every browser, you'll have to add your animation for all differents browsers.

In your case, you will use 

-moz-transition

As an example, these are CSS3 transition declaration:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

Here is one of my favorite tools to help speed up the process: http://css3generator.com/

Upvotes: 1

Related Questions