CSS margin errors when combining jQuery flip() with CSS brightness in firefox -

i've got site layout working in chrome, has issues in firefox.

i'm using jquery , have .flip plugin added. when use .flip() on card i've created works in both browsers, when add .css brightness change card mousing on it... has weird margin errors in firefox when click on , flip animation occurs. card jumps , left 10-15px, settles it's proper position after animation finishes.

firefox works fine if remove brightness statements javascript. chrome handles fine either way.

i have no idea why case.

it seems random me brightness property causing issue.

update:

to make things more confusing, i've found margin errors stop happening if remove box-shadow attributes css '#dragonfront, #dragonback {}' section. in case card lights when moused on it's supposed to, of course, there's no more drop shadow.

the margin error occurs when both brightness attribute , box-shadow attribute both active.

code:

html

<div id="dragoncard">     <div class="front">         <div id="dragonfront">             <div class="insetshadowfrontdragon">                 <div style="height: 9%"></div>                 <div class="frontlabel"></div>                                               </div>         </div>     </div>     <div class="back">         <div id="dragonback">             <div class="insetshadowbackdragon"></div>             <div class="cellfooterdragon" id="cellfooterdragon"></div>                           </div>     </div> </div> 

css

#dragoncard {     height: 50%;      width: 33%;     float: left; }  #dragonback, #dragonfront  {     border: solid 8px #467d99;     border-radius: 20px;     width: 100%;     height: 100%;     margin: auto;     padding: 0px;     background-size: cover;      -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;     -webkit-box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.8);     -moz-box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.8);     box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.8); }  #dragonfront {     background-image: url("../img/racecard/dragon.jpg");     background-position: right 0% bottom 96.5%; }  .cellfooterdragon {     border-radius: 0px 0px 9px 9px;     height: 15%;     width: 100%;     font-size: 30px;     line-height: 185%;     background-color: #467d99;     text-align: center;     font-family: 'eczar';     color: #000000;     text-shadow: 1px -1px 0 rgba(250,250,250,0.3); }  .insetshadowbackdragon {     height: 85%;     border-radius: 12px 12px 0px 0px; }  .insetshadowfrontdragon {     border-radius: 12px 12px 12px 12px;     height: 100%; }  .insetshadowbackdragon, .insetshadowfrontdragon {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;     -webkit-box-shadow: inset 2px 2px 11px 1px rgba(0,0,0,0.8);     -moz-box-shadow: inset 2px 2px 11px 1px rgba(0,0,0,0.8);     box-shadow: inset 2px 2px 11px 1px rgba(0,0,0,0.8); }  .frontlabel {     width: 100%;     background-size: contain;     background-repeat: no-repeat;     border-radius: 0px 0px 12px 12px;     background-image: url("../img/ddicelogo1.gif");     height: 91%; } 

js

$(document).ready(function() {      $('#dragoncard')         .flip()         .click(function() {              $(this).off(".flip");              $(this).addclass('flipped');             $(this).css('cursor', 'initial');          })         .hover(function() {              $(this).css({                 '-webkit-filter': 'brightness(115%)',                 'filter': 'brightness(115%)',             });              if (!$(this).hasclass('flipped')) { $(this).css('cursor', 'pointer'); }              else { $(this).css('cursor', 'initial'); }          })         .mouseout(function() {              $(this).css({                 '-webkit-filter': 'brightness(100%)',                 'filter': 'brightness(100%)'             })          });  });