-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Open
Labels
Milestone
Description
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/
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.
Metadata
Metadata
Assignees
Labels
Type
Projects
Relationships
Development
Select code repository
Activity
antoinerg commentedon Nov 21, 2019
@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 🤔 ?[-]image trace jumps/flashes on firefox[/-][+]image and heatmap traces jump/flash on Firefox and Safari[/+]jonmmease commentedon Nov 21, 2019
Done, thanks!
etpinard commentedon Nov 28, 2019
Hmm. I can't replicate in FF 70
jonmmease commentedon Nov 30, 2019
Hmm, I am seeing it in FF 70 on Ubuntu. @antoinerg were you able to reproduce?
antoinerg commentedon Dec 1, 2019
I can reproduce it in FF 70.0.1 (64-bit) on Linux (NixOS distro).
firasm commentedon Dec 10, 2019
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.
etpinard commentedon Jan 7, 2020
@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 commentedon Jan 8, 2020
It's hard to say which one behaves right and I suspect the specification may not be clear in this regard.
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 commentedon Jan 8, 2020
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:
plotly.js/src/plots/cartesian/dragbox.js
Lines 770 to 774 in 4ab3b49
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.antoinerg commentedon Jan 21, 2020
This may be a problem with Firefox itself: Images are flashing when updates by img.src[]=url in Firefox >= 8.0
Potential solution: https://stackoverflow.com/questions/14704796/image-reload-causes-flicker-only-in-firefox/14711272#14711272
18 remaining items