OL Tiling Issue

So this strange tiling issue is only occuring when moving around the map.

Some things to note:

1) You can see the markers, airplane icon, and flight paths. These are all overlays, where the actual world map is the base layer (TMS layer).

2) Before adding these vectors/markers, there was no checkered grey/white tiling issue. You could pan around and everything was super smooth.

Edit: to see a larger version of the map, right click the image, copy image url, and paste it into a new browser window.

Any ideas on why this may be? I understand the tiles (pngs) have to be essentially downloaded, but it seems strange when adding just vectors and markers would cause this to happen.

  • What library and what rendering engine are you using? Commented Nov 4, 2013 at 22:36
  • Hi Frank, not sure if I totally understand your question. Using MapServer 6.0, standard EPSG 4326.
    – Nubtacular
    Commented Nov 5, 2013 at 16:26
  • I missed openlayers in the title. I was asking because there is a CSS transition bug in most webkit versions that will return from the fade in transition before the opacity is all the way gone, leaving you with weird tiles. I am going to post an answer below on that issue. Commented Nov 6, 2013 at 15:36

2 Answers 2


I can not be certain that this issue is not a network issue, but you may want to check your network traffic and see if the returned tiles are valid or not(blank).

If the tiles are valid on the network side of the house, your next debug path should be with the CSS properties listed below, found in openlayers.

Inside theme/default/sytle.css

.olLayerGrid .olTileImage {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;

.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;

I would comment out these two classes. The transition opacity bug in some webkit can cause semi-transparent and completely transparent tiles randomly. The issue is caused by a the transition never reaching the final value.

  • I would need some code samples of the map and layer creation to be sure. Commented Nov 6, 2013 at 15:49

I had a problem like that when I tried tilecache plus wsgi or cgi or fcgi. Tiles never got completely downloaded, at the end I stopped using that for that reason plus the resolution stuff, etc. It seems to me that it's a communication problem. If you think the same, here you can find some information about those above:

  1. https://stackoverflow.com/questions/219110/how-python-web-frameworks-wsgi-and-cgi-fit-together
  2. https://stackoverflow.com/questions/3937224/differences-and-uses-between-wsgi-cgi-fastcgi-and-mod-python-in-regards-to-py

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.