image and heatmap traces jump/flash on Firefox and Safari

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](https://user-images.githubusercontent.com/15064365/69352442-f245df00-0c4a-11ea-9547-0aa3efc062ab.gif)
 
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.

	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]);

	// figure out if we need to recalculate axis constraints
	var constraints = fullLayout._axisConstraintGroups \|\| [];
	for(axId in rangesAltered) {
	for(i = 0; i < constraints.length; i++) {
	var group = constraints[i];
	if(group[axId]) {
	// Always recalc if we're changing constrained ranges.
	// Otherwise it's possible to violate the constraints by
	// specifying arbitrary ranges for all axes in the group.
	// this way some ranges may expand beyond what's specified,
	// as they do at first draw, to satisfy the constraints.
	flags.calc = true;
	for(var groupAxId in group) {
	if(!rangesAltered[groupAxId]) {
	Axes.getFromId(gd, groupAxId)._constraintShrinkable = true;
	}
	}
	}
	}
	}

	exports.enforce = function enforce(gd) {
	var fullLayout = gd._fullLayout;
	var constraintGroups = fullLayout._axisConstraintGroups \|\| [];

	var i, j, axisID, ax, normScale, mode, factor;

	for(i = 0; i < constraintGroups.length; i++) {
	var group = constraintGroups[i];
	var axisIDs = Object.keys(group);

	var minScale = Infinity;
	var maxScale = 0;
	// mostly matchScale will be the same as minScale
	// ie we expand axis ranges to encompass everything
	// that's currently in any of their ranges, but during
	// autorange of a subset of axes we will ignore other
	// axes for this purpose.
	var matchScale = Infinity;
	var normScales = {};
	var axes = {};
	var hasAnyDomainConstraint = false;

	// find the (normalized) scale of each axis in the group
	for(j = 0; j < axisIDs.length; j++) {
	axisID = axisIDs[j];
	axes[axisID] = ax = fullLayout[id2name(axisID)];

	if(ax._inputDomain) ax.domain = ax._inputDomain.slice();
	else ax._inputDomain = ax.domain.slice();

	if(!ax._inputRange) ax._inputRange = ax.range.slice();

	// set axis scale here so we can use _m rather than
	// having to calculate it from length and range
	ax.setScale();

	// abs: inverted scales still satisfy the constraint
	normScales[axisID] = normScale = Math.abs(ax._m) / group[axisID];
	minScale = Math.min(minScale, normScale);
	if(ax.constrain === 'domain' \|\| !ax._constraintShrinkable) {
	matchScale = Math.min(matchScale, normScale);
	}

	// this has served its purpose, so remove it
	delete ax._constraintShrinkable;
	maxScale = Math.max(maxScale, normScale);

	if(ax.constrain === 'domain') hasAnyDomainConstraint = true;
	}

	// Do we have a constraint mismatch? Give a small buffer for rounding errors
	if(minScale > ALMOST_EQUAL * maxScale && !hasAnyDomainConstraint) continue;

	// now increase any ranges we need to until all normalized scales are equal
	for(j = 0; j < axisIDs.length; j++) {
	axisID = axisIDs[j];
	normScale = normScales[axisID];
	ax = axes[axisID];
	mode = ax.constrain;

	// even if the scale didn't change, if we're shrinking domain
	// we need to recalculate in case `constraintoward` changed
	if(normScale !== matchScale \|\| mode === 'domain') {
	factor = normScale / matchScale;

	if(mode === 'range') {
	scaleZoom(ax, factor);
	} else {
	// mode === 'domain'

	var inputDomain = ax._inputDomain;
	var domainShrunk = (ax.domain[1] - ax.domain[0]) /
	(inputDomain[1] - inputDomain[0]);
	var rangeShrunk = (ax.r2l(ax.range[1]) - ax.r2l(ax.range[0])) /
	(ax.r2l(ax._inputRange[1]) - ax.r2l(ax._inputRange[0]));

	factor /= domainShrunk;

	if(factor * rangeShrunk < 1) {
	// we've asked to magnify the axis more than we can just by
	// enlarging the domain - so we need to constrict range
	ax.domain = ax._input.domain = inputDomain.slice();
	scaleZoom(ax, factor);
	continue;
	}

	if(rangeShrunk < 1) {
	// the range has previously been constricted by ^^, but we've
	// switched to the domain-constricted regime, so reset range
	ax.range = ax._input.range = ax._inputRange.slice();
	factor *= rangeShrunk;
	}

	if(ax.autorange) {
	/*
	* range & factor may need to change because range was
	* calculated for the larger scaling, so some pixel
	* paddings may get cut off when we reduce the domain.
	*
	* This is easier than the regular autorange calculation
	* because we already know the scaling `m`, but we still
	* need to cut out impossible constraints (like
	* annotations with super-long arrows). That's what
	* outerMin/Max are for - if the expansion was going to
	* go beyond the original domain, it must be impossible
	*/
	var rl0 = ax.r2l(ax.range[0]);
	var rl1 = ax.r2l(ax.range[1]);
	var rangeCenter = (rl0 + rl1) / 2;
	var rangeMin = rangeCenter;
	var rangeMax = rangeCenter;
	var halfRange = Math.abs(rl1 - rangeCenter);
	// extra tiny bit for rounding errors, in case we actually
	// are expanding to the full domain
	var outerMin = rangeCenter - halfRange * factor * 1.0001;
	var outerMax = rangeCenter + halfRange * factor * 1.0001;
	var getPad = makePadFn(ax);

	updateDomain(ax, factor);
	var m = Math.abs(ax._m);
	var extremes = concatExtremes(gd, ax);
	var minArray = extremes.min;
	var maxArray = extremes.max;
	var newVal;
	var k;

	for(k = 0; k < minArray.length; k++) {
	newVal = minArray[k].val - getPad(minArray[k]) / m;
	if(newVal > outerMin && newVal < rangeMin) {
	rangeMin = newVal;
	}
	}

	for(k = 0; k < maxArray.length; k++) {
	newVal = maxArray[k].val + getPad(maxArray[k]) / m;
	if(newVal < outerMax && newVal > rangeMax) {
	rangeMax = newVal;
	}
	}

	var domainExpand = (rangeMax - rangeMin) / (2 * halfRange);
	factor /= domainExpand;

	rangeMin = ax.l2r(rangeMin);
	rangeMax = ax.l2r(rangeMax);
	ax.range = ax._input.range = (rl0 < rl1) ?
	[rangeMin, rangeMax] : [rangeMax, rangeMin];
	}

	updateDomain(ax, factor);
	}
	}
	}
	}
	};

	exports.doAutoRangeAndConstraints = function(gd) {
	var fullLayout = gd._fullLayout;
	var axList = Axes.list(gd, '', true);
	var matchGroups = fullLayout._axisMatchGroups \|\| [];
	var axLookup = {};
	var ax;
	var axRng;

	for(var i = 0; i < axList.length; i++) {
	ax = axList[i];
	cleanAxisConstraints(gd, ax);
	doAutoRange(gd, ax);
	axLookup[ax._id] = 1;
	}

	enforceAxisConstraints(gd);

	groupLoop:
	for(var j = 0; j < matchGroups.length; j++) {
	var group = matchGroups[j];
	var rng = null;
	var id;

	for(id in group) {
	ax = Axes.getFromId(gd, id);

	// skip over 'missing' axes which do not pass through doAutoRange
	if(!axLookup[ax._id]) continue;
	// if one axis has autorange false, we're done
	if(ax.autorange === false) continue groupLoop;

	axRng = Lib.simpleMap(ax.range, ax.r2l);
	if(rng) {
	if(rng[0] < rng[1]) {
	rng[0] = Math.min(rng[0], axRng[0]);
	rng[1] = Math.max(rng[1], axRng[1]);
	} else {
	rng[0] = Math.max(rng[0], axRng[0]);
	rng[1] = Math.min(rng[1], axRng[1]);
	}
	} else {
	rng = axRng;
	}
	}

	for(id in group) {
	ax = Axes.getFromId(gd, id);
	ax.range = Lib.simpleMap(rng, ax.l2r);
	ax._input.range = ax.range.slice();
	ax.setScale();
	}
	}
	};

	seq.push(
	clearSelect,
	subroutines.doAutoRangeAndConstraints,
	drawAxes,
	subroutines.drawData,
	subroutines.finalDraw
	);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Sponsors

Uh oh!

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

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Participants

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

Description

Activity

antoinerg commented on Nov 21, 2019

jonmmease commented on Nov 21, 2019

etpinard commented on Nov 28, 2019

jonmmease commented on Nov 30, 2019

antoinerg commented on Dec 1, 2019

firasm commented on Dec 10, 2019

etpinard commented on Jan 7, 2020

antoinerg commented on Jan 8, 2020

alexcjohnson commented on Jan 8, 2020

antoinerg commented on Jan 21, 2020

3 remaining items

antoinerg commented on Feb 18, 2020

etpinard commented on Feb 19, 2020

etpinard commented on Feb 19, 2020

jackparmer commented on Sep 10, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Participants

Issue actions