0

I've created a plus sign (+) with CSS using the :after pseudo element. When the containing element is clicked, I'm rotating (with a transform) the plus sign (+) 45 degrees to make an (x). When the containing element is clicked again, the (x) returns back to (+).

This works as expected, but it appears the position of the horizontal line that makes the (+) moves slightly down and the width gets smaller after the transform has completed.

It looks like this is only happening in Firefox.

I've created a fiddle to show what I mean.

Here is the code for reference: 

$('#MobileProx').click(function() {
  $('#MobileProx .RotateXWrap').toggleClass('Active');
  return false;
});
 #MobileProx {
   position: relative;
   top: 50px;
   height: 20px;
   display: block;
   text-align: left;
   padding: 2%;
   color: #fff;
   font-size: 1.5em;
   background: #0099a8;
   cursor: pointer;
 }
 #MobileProx .RotateXWrap {
   transition: all 0.35s ease-in-out 0s;
   -moz-transition: all .35s ease-in-out 0s;
   -ms-transition: all .35s ease-in-out 0s;
   -o-transition: all .35s ease-in-out 0s;
   -webkit-transition: all .35s ease-in-out 0s;
 }
 #MobileProx .RotateXWrap {
   float: right;
   margin-right: 1%;
   width: 20px;
   height: 20px;
 }
 #MobileProx .RotateXWrap.Active {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 #MobileProx .RotateX {
   margin-left: 9px;
   background: white;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   height: 20px;
   position: absolute;
   width: 3px;
 }
 #MobileProx .RotateX:after {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   background: white;
   content: "";
   height: 3px;
   left: -9px;
   position: absolute;
   top: 8.5px;
   width: 20px;
 }
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MobileProx">Click here
  <div class="RotateXWrap">
    <span class="RotateX"></span>
  </div>
</div>

Any suggestions?

Tim
  • 881
  • 8
  • 19
  • just a guess, but this is probably a result of your browser's specific rendering engine. – Woodrow Barlow Jun 04 '15 at 19:51
  • also, in the future, please include relevant code directly in the post (and, if you like, supplement it with a link to jsfiddle). that way, even if the fiddle gets deleted, future visitors can still learn from the post. – Woodrow Barlow Jun 04 '15 at 19:54
  • http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome Sorry I don't have an answer, but I encountered something similar before, this post may help out. – Paul Coghill Jun 04 '15 at 20:08

0 Answers0