Vectors flickering on zoom/pan on 10.8 safari 6.0 and iOS

[jfgirard]

Hi,

I recently updated to mountain lion (10.8) and noticed a bug with safari 6.0. On zoom / pan, the vector layers are flickering a lot. Doing some tests with the debug examples, I was puzzled that the issue was not happening. But then I realized that the issue happen only if the map container (div with id="map") is big enough! On my computer (imac 27''), setting a width at 1000px works fine, but at 1020px does'nt! Same with percent: 54% works but not 55% and greater.

Very strange...

It works fine on Chrome and FF.

Anyone can confirm ?

[oleksii-leonov]

Confirm! (Mac OS 10.7, Safari 6.0)
Get flickering vector layers while zooming or dragging when map width is more ~1000px.
If map width is less then ~1000px everything works fine.

In FF everything works fine with any map width.

[mourner]

Hmm, interesting. The same thing happened in iOS Safari, and it turned out this only happens when the vector drawing area (that's usually the map size + some padding, updating on moveend) is bigger than the device screen, and it was fixed by adjusting the padding depending on screen size. Maybe it's the same thing with Safari 6 under Lion.

Could you experiment with different L.Path.CLIP_PADDING settings and confirm the dependence on the screen size?

[oleksii-leonov]

I did quick test (resize window, set L.Path.CLIP_PADDING in console, check flickering, write results) :)

When map width is 1437px (check with $('#map').width() in console):
If L.Path.CLIP_PADDING >= 0.2 — get flickering, if L.Path.CLIP_PADDING < 0.2 — everything fine.

When map width is 1261px:
If L.Path.CLIP_PADDING >= 0.3 — get flickering, if L.Path.CLIP_PADDING < 0.3 — everything fine.

When map width is 1058px:
If L.Path.CLIP_PADDING >= 0.45 — get flickering, if L.Path.CLIP_PADDING < 0.45 — everything fine.

[jfgirard]

@mourner
My experiments:

screen size : 1162px
if L.Path.CLIP_PADDING > 0.37 => flickering. (0.36 and under is fine)

screen size: 2068px
if L.Path.CLIP_PADDING >= 0 => flickering.

if L.Path.CLIP_PADDING < - 0.02 => OK

No good to have minus PADDING!

[mourner]

Thanks for the tests! It seems that it starts to happen when the vector area is > ~2010px in width. What resolution do you use?

[jfgirard]

My screen resolution is 2560 x 1440...
Doing a test at full size:
screen width : 2560px
L.Path.CLIP_PADDING must be smaller or equal then -0.1092 to not have the issue (-0.1091 flicker).

[mourner]

I see, so the edge is 2000px... No idea how to fix this yet unfortunately, seems like it's only fixable from the Safari side. I wonder if it's even worse on the Retina Macs.

[jfgirard]

Yeah browser issue :(
I did test with the webkit nighlty build but no luck, its the same behavior.

[mdaines]

I just noticed this issue and tried to create a reduced testcase: http://temporary.mdaines.com/svg-viewbox.html

This sets the WebkitTransform style and the viewBox attribute similarly to what Leaflet does in _updateSvgViewport.

I as well found that flickering started to occur when the SVG element is about 2000px wide, but only when using translate3d -- hence the "2D Transform" and "3D Transform" buttons in the link above. If plain translate is used, I don't see any flickering. So a possible workaround might be to not use 3d transforms in this particular case.

[mourner]

@mdaines that's a great clue! Flickering also happens in some cases on iPad, especially often on retina one, so this might fix it there too as well.
@danzel let's try using 3d only for translates that update often (like on moveend, e.g. for map pane) and 2d for everything else (svg viewbox updates only on moveend).

[danzel]

Yeah could be an idea. AFAIK the 3d graphics card isn't used unless you use translate-3d, but that probably won't matter here.
I have a mac on me today so I'll take a look.

[danzel]

Okay, have had a bit of a look at this.
You can hack DomUtil.getTranslateString so that is3d is false, then we always use 2d translates.

This makes the vector flickering on dragend stop, but it makes zoom animations go really bad (like the map flickers off for a moment) and dragging is a bit a slower (I'm assuming as 3d hardware is not used).

For the 2d translate fix to work at all, all parent nodes of the svg also need to only use 2d translates, any 3d translates will cause the bug to happen.

I also tried top/left positioning the svg but as mapPane was 3d transformed the issue still occurred.

So sadly no fix yet :-(

[rstrand]

Would it stop the flickering if a path was split into multiple smaller viewports which are then translated individually?