Skip to content

image and heatmap traces jump/flash on Firefox and Safari #4377

@jonmmease

Description

@jonmmease
Contributor

The new image trace seems to have a flashing/jumping behavior when zoomed in and panning on Firefox and Safari. (Firefox version 69.0, Safari version 13.0.3)

Example from https://plot.ly/python/imshow/

image_jump

This jumping does not happen on Chrome but I do see it on Firefox/Safari. Not sure if it's related, but in all three browsers, the tooltip also seems to jump to another location when the pan is completed.

Activity

antoinerg

antoinerg commented on Nov 21, 2019

@antoinerg
Contributor

@jonmmease I think the issue also occurs on heatmap (https://plot.ly/python/heatmap/). Could you rename the issue to reflect that?

The problem stems from reinjecting an image when pan operation is completed. I thought this pattern was safe since it's been used for a long time in heatmap. Maybe this issue only affects newer versions of Firefox 🤔 ?

changed the title [-]image trace jumps/flashes on firefox[/-] [+]image and heatmap traces jump/flash on Firefox and Safari[/+] on Nov 21, 2019
jonmmease

jonmmease commented on Nov 21, 2019

@jonmmease
ContributorAuthor

Could you rename the issue to reflect that?

Done, thanks!

etpinard

etpinard commented on Nov 28, 2019

@etpinard
Contributor

Hmm. I can't replicate in FF 70

jonmmease

jonmmease commented on Nov 30, 2019

@jonmmease
ContributorAuthor

Hmm, I am seeing it in FF 70 on Ubuntu. @antoinerg were you able to reproduce?

antoinerg

antoinerg commented on Dec 1, 2019

@antoinerg
Contributor

Hmm, I am seeing it in FF 70 on Ubuntu. @antoinerg were you able to reproduce?

I can reproduce it in FF 70.0.1 (64-bit) on Linux (NixOS distro).

firasm

firasm commented on Dec 10, 2019

@firasm

I can also reproduce in Safari 13.0.3 on macOS 10.15.1.

On the same system, the problem does not appear in Chrome Version 78.0.3904.108.

added this to the v1.53.0 milestone on Dec 12, 2019
etpinard

etpinard commented on Jan 7, 2020

@etpinard
Contributor

@antoinerg do you think there's an "easy" way to fix this bug?

Or do you think our canvas -> pixels -> img inside the _paper SVG is fundamentally flawed and FF does behaves as expected?

antoinerg

antoinerg commented on Jan 8, 2020

@antoinerg
Contributor

Or do you think our canvas -> pixels -> img inside the _paper SVG is fundamentally flawed and FF does behaves as expected?

It's hard to say which one behaves right and I suspect the specification may not be clear in this regard.

do you think there's an "easy" way to fix this bug?

Idea for an easy fix: have two images (A and B) and alternate between the two. Once you pan, image B content is updated and moved in front of image A (so no flash in principle). Then if you pan again, image A content is updated and moved in front and so on. Hopefully, this approach works.

If we only target a fix for FF: leverage image-rendering: pixelated, draw the image only once and things will fly 🐎.

alexcjohnson

alexcjohnson commented on Jan 8, 2020

@alexcjohnson
Collaborator

So we're reverting the drag, then redrawing with the new view... and it seems like even if we do this synchronously, some browsers will do two repaints (if that's it, there will be async edge cases in other browsers too). I wonder if we can just not revert the drag, and tweak the redraw process if necessary so it still works right. I think it's this call that's doing it:

function dragTail() {
// put the subplot viewboxes back to default (Because we're going to)
// be repositioning the data in the relayout. But DON'T call
// ticksAndAnnotations again - it's unnecessary and would overwrite `updates`
updateSubplots([0, 0, pw, ph]);

updateSubplots seems to modify some internal state as well as adjusting viewboxes, we still may need the internal state even if we don't change anything visible.

self-assigned this
on Jan 9, 2020
antoinerg

antoinerg commented on Jan 21, 2020

@antoinerg
Contributor

18 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbugsomething brokenperformancesomething is slow

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @nicolaskruchten@antoinerg@gvwilson@jackparmer@firasm

        Issue actions

          image and heatmap traces jump/flash on Firefox and Safari · Issue #4377 · plotly/plotly.js