I wanted to make a fancier scale plugin, that basically scales an element from the center of a clicked element to the center of the browser window. My code is this:

1.     (function($){
           $.fn.fancyScale = function(options) {
               settings = $.extend({}, options);
               var w = Math.round($(window).width()/2)-$(settings.target).width()/2;
               var h = Math.round($(window).height()/2)-$(settings.target).height()/2;
               
               return this.each(function() {
                   $(this).click(function() {
                       if($(settings.target).is(":hidden")) {
                           $(settings.target).position({
                                my: "left top",
                                at: "center",
                                of: "#"+this.id
                            })
                           .animate({
                               width: 'show',
                               height: 'show',
                               left: w,
                               top: h,
                               duration: 'slow'
                           });
                       }
                       else {
                           var l = parseInt($(this).css("left"))+$(this).width()/2;
                           var t = parseInt($(this).css("top"))+$(this).height()/2;
                           $(settings.target)
                           .animate({
                               width: 'hide',
                               height: 'hide',
                               left: l+"px",
                               top: t+"px",
                               duration: 'slow'
                           });
                       }
                   });
               });
           }
       })(jQuery);
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

The commented .position part is what seems to be malfunctioning. If I use

1. .css({
                               left: parseInt($(this).css("left"))+$(this).width()/2 + "px",
                               top: parseInt($(this).css("top"))+$(this).height()/2 + "px"
                           })
   
   
   

instead, it works perfectly fine in both Firefox and Safari. If I use the position method it works fine in Firefox, but in Safari or any other Webkit browser the scaling starts from the wrong position, based on where the clicked element is on screen.

It seems that something causes the position() calculation to add extra pixels in Webkit but not in Firefox.