781444 - Really bad performance when using jquery imagezoom script

Status: RESOLVED INVALID

Description

[Wes Kocher (:KWierso)]

When you load that URL, if you click the image in the article, it pops up a somewhat larger version of the image, and when you hover over that enlarged image, a small portion of the image is zoomed in much further.

In IE10 (and apparently in the various Webkit browsers, but I haven't tested those myself), this small zoomed in section glides smoothly as you move the mouse over the image. In Firefox (I'm on Nightly, people reported this problem with 14.0.1), the animation is incredibly jerky, and half the time doesn't even appear.

When moving the mouse over the image, both Firefox and IE10 start using a lot of CPU power to render the enlarged portion.

It looks like the page is using the imageZoom jquery plugin to render this effect: http://www.fastcoexist.com/sites/all/libraries/imagezoom/imageZoom.min.js?d


The original reporting of this was here: http://forums.mozillazine.org/viewtopic.php?uid=212909&f=7&t=2512307


I'm not exactly sure where this bug belongs. Hopefully the triage team knows better. :)

Comment 1

[Ilyse Kazar]

As the original poster on the forum thread referred to in the above comment, I can confirm this problem exists also on Mac in Firefox 14.0.1. Have tested in safe mode. Problem does not exist on Mac when using latest versions of Safari or Chrome.

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

Well, against Google Chrome 23.0.1236.0 (Official Build 151635) canary I get smooth Painting of the Enlargement Rect, but hell of CPU Usage (>70% both Cores).

Against Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0 ID:20120815030556 there's almost Invalidation(?)/Flickering in the Enlargement Rect going on combined with lower CPU Usage (~40-50%). Safe-Mode makes no Difference.

The Flickering itself seems to be a recent Regression.

Profile against above Build with only moving the Rect around:
http://people.mozilla.com/~bgirard/cleopatra/?report=0181c36b878b3feec69fb422dfeb44f1d47a3c4d

Btw, Parity Whiteboard Entries are Feature Stuff only, not Perf Stuff, no?

Comment 3

[Andreas Gal :gal]

This sounds like repainting or reflowing instead of JS to me. Want to try this with paint flashing enabled in Firefox?

Comment 4

[(mostly gone) XtC4UaLL [:xtc4uall]]

Ugh, you're right. I accidentally kept the "Javascript only" Option in the Profile's Options checked ..... sorry :-/.

With nglayout.debug.paint_flashing;true I see the whole/big Rect being invalidated/rendered when you move around the smaller "Enlargement" one. But I'm not really confident about this.

Comment 5

[Andreas Gal :gal]

Yeah. I would bet the library does something dumb and twiddles with width and height instead of using transform. Can you verify this with the inspector? (what properties of the image element do you see changing?)

Comment 6

[Wes Kocher (:KWierso)]

The enlarged partial image shown on hover is just a larger version of the full image.

This looks like the relevant part of the jquery plugin code:

var interval = setInterval(function () {
  $image.hide();
  $loader.show();
  if ($viewpointImage.complete) {
    clearInterval(interval);
    $loader.hide();
    $image.show();
    $this.mousemove(function (event) {
      $viewpoint.hide();
      var vars = {};
      vars.width2height = $(this).width() / $(this).height();
      vars.image2viewpoint = $image.width() / $viewpointImage.width;
      vars.mouse = {};
      vars.mouse.top = event.pageY - $(this).offset().top;
      vars.mouse.left = event.pageX - $(this).offset().left;
      vars.viewpoint = {};
      vars.viewpoint.position = {};
      vars.viewpoint.position.top = vars.mouse.top - $viewpoint.height() / 2;
      vars.viewpoint.position.left = vars.mouse.left - $viewpoint.width() / 2;
      vars.viewpoint.image = {};
      vars.viewpoint.image.top = -vars.mouse.top / vars.image2viewpoint + $viewpoint.height() / 2;
      vars.viewpoint.image.left = -vars.mouse.left / vars.image2viewpoint + $viewpoint.width() / 2;
      $viewpoint.css({
          top: vars.viewpoint.position.top,
          left: vars.viewpoint.position.left
      });
      $viewpoint.css({
          'background-position': vars.viewpoint.image.left + 'px ' + vars.viewpoint.image.top + 'px'
      });
      $viewpoint.show();
    });
    $this.mouseout(function () {
        $viewpoint.hide();
    });
  }
}, 50);

Comment 7

[Mike Taylor [:miketaylr]]

I don't see that zoom interaction anymore -- do you Wes? Possibly they redesigned?

Comment 8

[Wes Kocher (:KWierso)]

Yeah, I don't see it either, and I don't really remember what it was doing four years ago, either.

Comment 9

[Mike Taylor [:miketaylr]]

Thanks!