Hi all!

Having a great adventure of my first jQuery website — for ages I'd
been telling myself "I should just get better at javascript", but I'd
been following the development of Sizzle and thought, right, this is
great!

http://antoniocaniparoli.co.uk/wip1

I am having a bit of a headache with cross-browser compatibilities
though. My script has two purposes: positioning and sizing the various
elements that constitute a photo gallery, and animating transitions
between images. As far as the positioning and sizing is concerned,
every major browser (Chrome, FF, IE, Opera, Safari latest stable
releases) processes the maths/DOM metrics differently. I expected this
out of IE, but it's incredibly distressing that the 'standardised'
rendering engines differ so wildly in their interpretation of the same
data.

If anybody has any insights into this, I'd be very interested. For the
moment, FF behaves as I believe everything else should in this matter
(apart from:...)

My biggest worry is to do with jQuery animation though. The gallery's
'sliding' mechanism — outside of the issue of the bad parsed maths —
seems to 'skip' half of the animation in IE, FF & Safari. In Chrome
and Opera it operates completely smoothly (but doesn't slide to the
right location).

The animation code is on lines 71-78 of 
http://antoniocaniparoli.co.uk/wip1/antonio.js:

  $('#gallery p a:first-child').click(function() {
    galLeft = parseInt($('#gallery').css('left'))+(vpX-294)/2+'px';
    $('#gallery').animate({left: galLeft}, 1500);
  })
  $('#gallery p a:last-child').click(function() {
    galLeft = parseInt($('#gallery').css('left'))-(vpX-294)/2+'px';
    $('#gallery').animate({left: galLeft}, 1500);
  })

The equation takes the viewport's width and subtracts the offsetWidth
of the non-gallery content on the left to give the gallery width — and
in theory every item in the gallery has just enough left and right
padding to fill the gallery's visible area. Again, all the metrics
work in FF.

So the real issue is why that animation is stilted in most browsers.
Any ideas?

NB: People might think this has something to do with the easing plugin
I've got in there. I have commented out all reference to it to avoid
ambiguity.

Reply via email to