Really bad performance when using jquery imagezoom script

RESOLVED INVALID

Status

()

Core
General
RESOLVED INVALID
6 years ago
2 years ago

People

(Reporter: KWierso, Unassigned)

Tracking

({perf})

Trunk
Points:
---

Firefox Tracking Flags

(platform-rel ?)

Details

(Whiteboard: [parity-chrome][parity-ie][platform-rel-jQuery], URL)

(Reporter)

Description

6 years ago
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. :)
(Reporter)

Updated

6 years ago
OS: Windows 8 → All
Hardware: x86_64 → All

Comment 1

6 years ago
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.
(Reporter)

Updated

6 years ago
Whiteboard: [parity-chrome][parity-ie]
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?
Assignee: nobody → general
Component: Untriaged → JavaScript Engine
Keywords: perf
Product: Firefox → Core

Comment 3

6 years ago
This sounds like repainting or reflowing instead of JS to me. Want to try this with paint flashing enabled in Firefox?
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.
Assignee: general → nobody
Component: JavaScript Engine → General

Comment 5

6 years ago
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?)
(Reporter)

Comment 6

6 years ago
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);
Whiteboard: [parity-chrome][parity-ie] → [parity-chrome][parity-ie][platform-rel-jQuery]

Updated

2 years ago
platform-rel: --- → ?
I don't see that zoom interaction anymore -- do you Wes? Possibly they redesigned?
Flags: needinfo?(wkocher)
(Reporter)

Comment 8

2 years ago
Yeah, I don't see it either, and I don't really remember what it was doing four years ago, either.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Flags: needinfo?(wkocher)
Resolution: --- → INVALID
Thanks!
You need to log in before you can comment on or make changes to this bug.