Tinakicious Tinakicious - 3 months ago 9
CSS Question

Firefox flexbox not working

I've made code, it's a bubble menu with a button. It works perfectly on Chrome but it works wrong on mozilla.
You can see and try it



$(".roundedBallOuter").click(function(e) {
$(this).toggleClass("clicked");
});

body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.roundedBallOuter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.roundedBall {
width: 200px;
height: 200px;
background: #ccc;
border-radius: 100%;
position: relative;
transition: all 0.3s ease;
cursor: pointer;
}
.roundedBall:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
box-shadow: 0 0 10px #555;
transition: all 0.3s ease;
}
.subBall {
width: 50px;
height: 50px;
background: #0077ab;
border-radius: 100%;
position: absolute;
transition: all 0.5s ease;
z-index: -1;
}
.roundedBallOuter.clicked .subBall.linkedIn {
transform: translate(-10em);
-webkit-transform: translate(-10em);
-moz-transform: translate(-10em);
-ms-transform: translate(-10em);
transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.facebook {
transform: rotate(45deg) translate(-10em) rotate(-45deg);
-webkit-transform: rotate(45deg) translate(-10em) rotate(-45deg);
-ms-transform: rotate(45deg) translate(-10em) rotate(-45deg);
-moz-transform: rotate(45deg) translate(-10em) rotate(-45deg);
transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.twitter {
transform: rotate(90deg) translate(-10em) rotate(-90deg);
-webkit-transform: rotate(90deg) translate(-10em) rotate(-90deg);
-moz-transform: rotate(90deg) translate(-10em) rotate(-90deg);
-ms-transform: rotate(90deg) translate(-10em) rotate(-90deg);
transition: all 0.5s ease;
}
.more {
font-size: 20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.more>span {
color: #0077ab;
display: block;
font-style: italic;
font-size: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="roundedBallOuter">
<div class="roundedBall">
<span class="more"><span>Click</span> for more information</span>
</div>
<div class="linkedIn subBall"></div>
<div class="facebook subBall"></div>
<div class="twitter subBall"></div>
</div>





Could you please help me, fix this bug?
Thanks in advance

Answer

You positioned the small balls as absolute, however you didn't give the the absolute position.

You can fix that by setting that position to the exact position chrome put the originally (which is top: 75px; left: 75px;)

Here is the fix:

$(".roundedBallOuter").click(function(e) {
  $(this).toggleClass("clicked");
});
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.roundedBallOuter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.roundedBall {
  width: 200px;
  height: 200px;
  background: #ccc;
  border-radius: 100%;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}
.roundedBall:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  box-shadow: 0 0 10px #555;
  transition: all 0.3s ease;
}
.subBall {
  width: 50px;
  height: 50px;
  background: #0077ab;
  border-radius: 100%;
  position: absolute;
  transition: all 0.5s ease;
  z-index: -1;
  top: 75px;
  left: 75px;
}
.roundedBallOuter.clicked .subBall.linkedIn {
  transform: translate(-10em);
  -webkit-transform: translate(-10em);
  -moz-transform: translate(-10em);
  -ms-transform: translate(-10em);
  transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.facebook {
  transform: rotate(45deg) translate(-10em) rotate(-45deg);
  -webkit-transform: rotate(45deg) translate(-10em) rotate(-45deg);
  -ms-transform: rotate(45deg) translate(-10em) rotate(-45deg);
  -moz-transform: rotate(45deg) translate(-10em) rotate(-45deg);
  transition: all 0.5s ease;
}
.roundedBallOuter.clicked .subBall.twitter {
  transform: rotate(90deg) translate(-10em) rotate(-90deg);
  -webkit-transform: rotate(90deg) translate(-10em) rotate(-90deg);
  -moz-transform: rotate(90deg) translate(-10em) rotate(-90deg);
  -ms-transform: rotate(90deg) translate(-10em) rotate(-90deg);
  transition: all 0.5s ease;
}
.more {
  font-size: 20px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.more>span {
  color: #0077ab;
  display: block;
  font-style: italic;
  font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="roundedBallOuter">
  <div class="roundedBall">
    <span class="more"><span>Click</span> for more information</span>
  </div>
  <div class="linkedIn subBall"></div>
  <div class="facebook subBall"></div>
  <div class="twitter subBall"></div>
</div>