Chrome breaks entire page when many vector layers are present and the map is enlarged.

[kjelderg]

This problem only seems to exist in Chrome. This problem is a little tricky to quantify since the variables are both number of vector layers and size of map.

I created a minimal fiddle [1] that demonstrates the problem. To see the issue, run the code and expand your browser window to a fairly large size. Near-maximized on my 2560x1440 is plenty with the values in it currently.

Increasing the number of vector layers decreases the required size of the window. Decreasing either the size of the window or the number of vector layers causes everything to work like normal. This definitely looks like some sort of memory problem.

[1] http://jsfiddle.net/kjelderg/j2u9T/1/

[tejl]

We've also experience this problem, which seems to be related to the latest version of Chrome or at least have gotten worse. I'm am currently using a computer with an older Chrome version (27.0.1453.93), with which I do not experience the problem in our application. If I however use a computer with the latest Chrome version, then the problem appears.

It also seems, that If any kind og browser dialog is brought up (e.g. "Do you want Chrome to save your password"), then the map suddenly appears again until I close the dialog.

[kjelderg]

I just sent the issue to Google Chrome team as well in case they can help.

[tejl]

Hi Kjelderg

Can you link to the Google Chrome issue you have created

[kjelderg]

Hmm...I could not find the Chrome issue (I used the Tools->Report An Issue feature which seems to deposit the issue in a black hole) so I created a Chromium issue[1] as well.

[1] https://code.google.com/p/chromium/issues/detail?id=325236

[rusvdw]

The latest version of chrome (32.0.1700.76 m) seems to have made this even worse. I have found though that OpenLayers 2.12 does not exhibit the problem. See http://jsfiddle.net/tHWV6/19/

[ahocevar]

1000 layers? This means 1000 dom elements on the map. I'm not surprised that this causes issues. Try to reduce the number of layers.

[rusvdw]

Sorry, I should have clarified. I was trying to show that version 2.12 works (does not cause rendering issues) in the latest version of chrome even with an excessive number of layers.

[belug23]

We were able to reproduce this with arround 6 layers on a fullscreen map on a 1920x1200 screen. that's not so excesive.

[marcjansen]

@belug23 can you share a link to your example?

[belug23]

I dont have a live server with it, but this fiddle brake with 10 layers on a 1920x1048 screen :

http://jsfiddle.net/6fxLe/

Here's how to make it brake (since it's not full screen)

Enlarge the map to the maximum of the fiddle page, then use the map vertical scroll to scroll down.

You may have to close your download bar and hide your bookmarks bar.

One thing I've discover this morning, Linux and chrome 32 don't have any problems.

[tejl]

Hi all

I've gotten closer to the cause of the problem. The file OpenLayers-2.13.1/theme/default/style.css contains the style configuration

.olTileImage {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}

From what I can see then the webkit specific CSS configurations
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
are causing the problem

If I remove these using the Google Chrome Developer Tools. Then the problem disappears. I will now create a custom CSS without these and try to run it in our test environments.

[kjelderg]

Just like you say, I added the following to my CSS and the problem is reduced to blinking/flashing when resizing, but the page does render:

/* work around conflict of Chrome and OpenLayers */
.olTileImage {
-webkit-backface-visibility: visible !important;
-webkit-transform: none !important;
}

[mprins]

perspective should have a unit assigned to it; see: http://www.w3.org/TR/css3-transforms/#perspective-property it takes a length as argument not a scalar

[IvanSanchez]

I can reproduce this bug, but only on Chrome on Windows platform; I cannot reproduce on Linux nor Mac.

I have also created another simple test. Adding vector layers one by one allows me to make the tile layer glitchy and not invisible: http://ivan.sanchezortega.es/chrome_ol_bug/

[kjelderg]

Thank you for that great test page. Maximized on my iMac in Chrome, I the map partially disappears at 4 vector layers and entirely at 5.

[belug23]

Even with the CSS patch the blinking happend while resizing and moving on the map.

Anything else could cause that?

[tejl]

@mprins: I tried to override the -webkit-perspective with the following configuration in own CSS file:

.olTileImage {
-webkit-perspective: none !important;
}

It did however not solve the problem. I must conclude it is related to -webkit-backface-visibility and -webkit-transform.

I've added same configuration as @kjelderg in my own CSS. i.e.

.olTileImage {
-webkit-backface-visibility: visible !important;
-webkit-transform: none !important;
}

[xctrails]

The CSS tweak from @kjelderg doesn't seem to have any effect on my page :-/
http://imgur.com/lnTYPC4

[kwadrat]

@IvanSanchez I see similar problem in this thread:
openlayers/openlayers#1207 (comment)

[rusvdw]

Thanks @kwadrat, using that other thread I came up with the following:

svg {
-webkit-transform: none !important;
}
.olTileImage {
-webkit-backface-visibility: visible !important;
-webkit-transform: none !important;
}

This fixes it for me even with 500 layers (yes i know that is way too much). See here http://jsfiddle.net/6fxLe/7/

Version 33.0.1750.146 m

[ghost]

Workaround above results in displayed map but flicker when zooming/panning. Removing CSS classes olLayerGrid olTileImage from the OL default theme resolves the issue completely for me, but that of course also means that GPU acceleration is off :(

I guess that Leaflet has been hit by this issue too so it would probably be worth looking into if they have found a workaround.

[ghost]

Sure enough - Leaflet/Leaflet#2612.

[IvanSanchez]

Now I can also reproduce this with Chrome on windows, by using just two vector layers and 5 or 6 tile layers.

[tonio]

Related chrome issue: https://code.google.com/p/chromium/issues/detail?id=337493

[oscarpt]

I fix this?; in firefox if it can load smoothly layers