Rendering problem with Firefox

[rochoa]

This replaces https://github.com/CartoDB/cartodb/issues/11466.

Context

Torque visualizations don't work well in Firefox v51.

Tiles are rendered, but for some of them are not 'cleared' and the result is similar to having the 'cumulative' option enabled.

This happens only in Firefox, and not on every tile, as some of them work as expected.

Steps to Reproduce

1. Make sure you're using Firefox v51
2. Open this map https://team.carto.com/u/ernestomb/builder/cd37d292-ec93-11e6-9e93-0e3ebc282e83/embed
3. Check that markers are not cleared and they start accumulating, but only on some of the tiles

Current Result

Torque maps aren't working well on Firefox

Expected result

Markers should be cleared from the map

Browser and version

Firefox v51

[rochoa]

This seems related to the old trick we use to clear the canvas, see https://github.com/CartoDB/torque/blob/d218c2da24709b1d730e43673379035e26546935/lib/torque/renderer/point.js#L92.

Doing a quick test using clearRect seems to fix the problem in Firefox, however, that might not work for other browsers (e.g. IE).

I tested with:

diff --git a/lib/torque/renderer/point.js b/lib/torque/renderer/point.js
index 5dce63a..609086c 100644
--- a/lib/torque/renderer/point.js
+++ b/lib/torque/renderer/point.js
@@ -89,7 +89,7 @@ var CartoDatasource = require('./datasource');
         var color = this._Map['-torque-clear-color']
         // shortcut for the default value
         if (color  === "rgba(255, 255, 255, 0)" || !color) {
-          this._canvas.width = this._canvas.width;
+          this._ctx.clearRect(0, 0, canvas.width, canvas.height);
         } else {
           var ctx = this._ctx;
           ctx.setTransform(1, 0, 0, 1, 0, 0);

As we were already using the width trick, I guess it's not a problem to ignore previous transformations. Otherwise, it's important to consider them, see http://stackoverflow.com/a/6722031.

[javisantana]

clearRect is the right way but we used that trick because it was faster (probably no longer true)

[donflopez]

Thanks, @rochoa! That was easy with your help!

As your link to StackOverflow says, we have to reset the transform to have a correct clearRect over the whole canvas.

There is not an important performance change.

• Old trick:

• .clearRect with reset:

I'll make a PR :)

[donflopez]

PR here

[dgaubert]

Do you some guidance to do acceptance check here?

[donflopez]

The acceptance is the same that the issue describes

[dgaubert]

I'm a newbie in Torque's world. My guess is that I'll need some setup in my local env to link the hotfix-branch to our stack and test it. Do you know what I'll need?

[donflopez]

Ouch, sorry, the prerequisites:

• npm i
• make
• serve the root folder with any server
• open /examples/navy_leaflet.html

[dgaubert]

LGTM 🇨🇭

[donflopez]

Cool!! Thanks @dgaubert!!

[rochoa]

Have you tested this in other browsers? Internet Explorer?

[donflopez]

Me not, are we supporting IE @rochoa?

[dgaubert]

I've tested only for: firefox and chrome

[rochoa]

We do. We need to test IE9+ and Edge. Also, don't forget Safari.

[dgaubert]

Safari 10.0.1 (11602.2.14.0.7): 🆗

[donflopez]

Ups, I didn't know it! Is there any windows laptop to try?

[rochoa]

What's the status on the IE testing?

For IE you can use https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/.

[donflopez]

Trying!

[donflopez]

It is working as expected! In Edge, downloading IE 9:)

[rochoa]

What about older versions? I'm worried about IE9, see http://stackoverflow.com/a/4085780.

[donflopez]

It doesn't work on IE9, but It didn't work before this changes, there are other problems @rochoa

[donflopez]

I've tested on IE10 and it works

[rochoa]

Then I would :shipit:.

[ernesmb]

Will this fix also work for maps created with cartodb.js?

[donflopez]

I'm not sure about the differences, sorry... but I'd say yes. Maybe @rochoa or @alonsogarciapablo can say more about this :)

[rochoa]

I won't if we don't release new versions of cartodb.js. @ernesmb Can you be more specific about what version you are talking about?

[ernesmb]

yes sorry, clients are asking about cartodb.js v3.12.11

let me ask them again just to be 100% sure

sorry for the noise

[rochoa]

OK, after talking to @ernesmb about this offline, we would release a new version of cartodb.js v3.15.x to address the issue.

[donflopez]

It is deployed in production, closing

[rochoa]

@ernesmb, @donflopez just published a new version of cartodb.js including the fixes.