Pixel Rounding in simultaneous animations (ala an accordion)

Pixel Rounding in simultaneous animations (ala an accordion)

I'm hoping for some help with an issue I'm exploring right now. Proviso: I make no claims to being a great javascript developer, and will appreciate any degree to which I can be forgiven for ways I may say/do things poorly.

A coworker was trying to set up a simple accordion in jQuery with a simultaneous slideUp and slideDown. He noticed that there was a bit of a pixel jog/flicker/bounce for elements beneath those that were animated that was annoying to a careful eye. So I started reading through the accordion plugin to see how it dealt with this issue and started to mess with using step functions to do simultaneous animations in more perfect sync. I set up a very simple example here:

http://halloweentree.net/test1.html

The good news: it works beautifully in Firefox. In Safari, though, there's a 1-2 pixel flickering at the bottom. My (uneducated) guess is that this has to do with the way Safari rounds the fx.now variable as it animates. This happens in the wonderful accordion plugin, too:

http://jquery.bassistance.de/accordion/demo/

I tried, just as a test, an example where I used javascript to round fx.now to animate both divs.

http://halloweentree.net/test2.html

   $('.opening p').height('0px');
            $('.opening p').animate({height : '200px'}, {
               duration: 1500,
               step: function(now, fx) {
                     $('.open').css({'height' : ((200 - Math.ceil(fx.now)) + fx.unit)}, now);
                     $('.opening').css({'height' : ((Math.ceil(fx.now)) + fx.unit)}, now);
                     $('.block').text(fx.now);
                  },
               complete: function() {
                     $('.open').removeClass('open');
                     $('.opening').addClass('open').removeClass('opening');
                  }            
            });


This is an ugly, ugly hack because I don't know what's the best way to get jQuery to let me iterate between two values without having it automatically adjust the height (not allowing me the opportunity to round it).

The good news, though, is that this WORKS in Safari.

So: has anyone else dealt with this issue? Some Google searches don't seem to reveal anyone else talking about it. What ways could I better implement this fix?

Thanks in advance for any thoughts you may be able to offer. Cheers!