Show and hide not working in Firefox with jQuery version 3.1.0

Question

I'm creating a small radio player using jQuery. You can find the code on codepen . I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:

   $(".back").click(function(){
     $("h2").show();
     $("hr").show();
     $(".guziki").hide();
     $("#backbutton").hide();
});

doesn't work. I've never experienced that problem. What might cause this?

 $(document).ready( function() { $(".middle").click(function() { $(this).children(".guziki").show(); $("h2").hide(); $("hr").hide(); $("#backbutton").show(); }); $(".back").click(function() { $("h2").show(); $("hr").show(); $(".guziki").hide(); $("#backbutton").hide(); console.log($(".back").parent()) }); }); var buttons = $("#one, #two").on("click", function() { buttons.toggle(); }); 

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio { background-color: #e0e0e0; max-width: 25%; overflow: hidden; font-family: helvetica; } h2 { color: #212121; text-align: center; font-family: 'Bungee Hairline' } h1 { color: #e0e0e0; text-align: center; text-transform: uppercase; padding-top: 2%; font-family: 'Bungee Hairline', cursive; font-size: 2em; } .top { background-color: #212121; height: 50px; margin-top: -5%; } .bottom { text-align: center; background-color: #212121; color: #e0e0e0; padding: 5px 0; } button { border: none; background: transparent; display: block; margin: 0 auto; font-size: 40px; } .guziki { text-align: center; display: none; } #two { display: none; } .fa-chevron-left { position: absolute; left: 20px; font-size: 30px; padding-top: 10px; cursor: pointer; } #backbutton { display: none; padding-top: 30px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio> <audio id="player2" src="http://stream.techno.fm/live.mp3"></audio> <div id="radio"> <div class="top"> <h1>radio techno</h1> <div id="backbutton"> <button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i> </button> </div> </div> <div class="middle kinetic"> <h2 id="kinetic">Kinetic</h2> <div class="guziki" id="guzikione"> <button onclick="document.getElementById('player').volume += 0.1">+</button> </button> <button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i> </button> <button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i> </button> <button onclick="document.getElementById('player').volume -= 0.1">-</button> </div> </div> <hr> <div class="middle technofm"> <h2 id="technofm">techno.fm</h2> <div class="guziki"> <button onclick="document.getElementById('player2').volume += 0.1">+</button> </button> <button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i> </button> <button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i> </button> <button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i> </button> <button onclick="document.getElementById('player2').volume -= 0.1">-</button> </div> </div> <hr> <div class="middle"> <h2>uzic</h2> </div> <hr> <div class="middle"> <h2>ballads fm 87,1</h2> </div> <hr> <div class="middle"> <h2>maximum fm 142,2</h2> </div> <div class=bottom> <h4>currently playing</h4> </div> </div> 

EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.

Answer 1

The problem is not with jQuery. The button is so small that you aren't hitting it with your click.

Demo

#backbutton button {
  position: absolute;
  left: 300px;
  min-width: 50px;
  min-height: 50px;
  background: pink;
}

Answer 2

This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.

.fa-chevron-left {
  font-size: 30px;
  padding-top: 10px;
  cursor: pointer;
 }

#backbutton {
    display: none;
    padding-top: 30px;
    position:relative;
 }
.back {
    position: absolute;
    left: 20px;
 }

http://codepen.io/anon/pen/GjokQp