javascript - CSS transition bug -

i have pair of divs should resize on click, works fine except every once in while div kind of flashes before resizing. done lot of research , agrees should fix "-webkit-backface-visibility: hidden;" i've tried , doesn't change anything. fails both in chrome , firefox. mean works fine , other times flickers horribly.

any ideas on wrong? in jquery? in css?

any appreciated.

my js:

(function($){

setup = function setup(){         var windowwidth;                  $('.day').each(function(){              var $this = $(this),                 links = $('.links', $this),                 images = $('.images', $this),                 largewidth,                 smallwidth,                 linkswidth,                 imageswidth;                    images.click(function(){                      windowwidth = $(window).width();                     linkswidth = $('.links', $this).width();                     imageswidth = $('.images', $this).width();                      largewidth = math.max(linkswidth,imageswidth);                     smallwidth = math.min(linkswidth,imageswidth);                      if (windowwidth < 850){                         images.width(largewidth);                         links.width(smallwidth);                     }                   })                   links.click(function(){                      windowwidth = $(window).width();                     linkswidth = $('.links', $this).width();                     imageswidth = $('.images', $this).width();                      largewidth = math.max(linkswidth,imageswidth);                     smallwidth = math.min(linkswidth,imageswidth);                      if (windowwidth < 850){                         links.width(largewidth);                         images.width(smallwidth);                     }                 })           });   }  $(document).ready(setup);  }(jquery)) 

and css:

.column {   width: 50%;   float: left;   overflow: hidden;   -webkit-transition: width 0.3s linear;   -moz-transition: width 0.3s linear;   -o-transition: width 0.3s linear;   transition: width 0.3s linear;    -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;    -webkit-perspective: 1000;   -webkit-transform:translate3d(0,0,0);   -webkit-transform: translatez(0);  } 

here jsfiddle: http://jsfiddle.net/ckvyq/2/

thanks lot!

the reason why widths start animating less , less because set width changed based on current width, when 1 clicked while transitioning values thrown off. remedy attempt calculate large , small width based on window size , on window resize, recommend , method used disable clicks using .on , .off setinterval duration of transition.

the other problem of right div wrapping next line caused width temporarily taking more window width. assume it's because divs animated @ different times, 1 expands before other contracts throwing next line. remedied problem lessening width of both of them couple pixels , using negative margin, increased padding trick have right div called images take space removed. part done in cleaner way did it, such including small decrease in initial calculation somewhere or perhaps in css, demo didn't figure big of issue, functions , made show problem

here updated jsfiddle

here changed jquery

(function ($) {     setup = function setup() {         var windowwidth;         $('.day').each(function () {             var $this = $(this),                 links = $('.links', $this),                 images = $('.images', $this),                 largewidth,                 smallwidth,                 linkswidth,                 imageswidth,                 count = 0;             var imagesclick = function () {                 images.off('click');                 links.off('click');                                 windowwidth = $(window).width();                 if(count === 0)                 {                     linkswidth = $('.links', $this).width() - 2;                     imageswidth = $('.images', $this).width() - 2;                     images.css({'margin-right': "-=4", 'padding-right': "+=4"});                     count++;                 } else{                     linkswidth = $('.links', $this).width();                     imageswidth = $('.images', $this).width();                 }                             largewidth = math.max(linkswidth, imageswidth);                 smallwidth = math.min(linkswidth, imageswidth);                 if (windowwidth < 850) {                     images.width(largewidth);                     links.width(smallwidth);                     settimeout(function () {                         images.on('click', imagesclick);                         links.on('click', linksclick);                     }, 300);                 }             }             images.on('click', imagesclick);             var linksclick = function () {                 images.off('click');                 links.off('click');                  windowwidth = $(window).width();                 if(count === 0)                 {                     linkswidth = $('.links', $this).width() - 2;                     imageswidth = $('.images', $this).width() - 2;                     images.css({'margin-right': "-=4", 'padding-right': "+=4"});                     count++;                 } else{                     linkswidth = $('.links', $this).width();                     imageswidth = $('.images', $this).width();                 }                     largewidth = math.max(linkswidth, imageswidth);                 smallwidth = math.min(linkswidth, imageswidth);                  if (windowwidth < 850) {                     links.width(largewidth);                     images.width(smallwidth);                     settimeout(function () {                         images.on('click', imagesclick);                         links.on('click', linksclick);                     }, 300);                 }             }             links.on('click', linksclick);         });     }     $(document).ready(setup); }(jquery))