Vector layer displaced by changing the window size using Chrome. #392

Closed
jorix opened this Issue Apr 5, 2012 · 31 comments

7 participants

@jorix

Using Chrome18 and http://www.openlayers.org/dev/examples/sundials-spherical-mercator.html try:

  • Access to this example (or refresh if already loaded).
  • Decrease the width of the window
  • Press a feature, the popup appears to the right place but the sun icon is displaced! Oops!

NOTE: I've only been seen using chrome, even using 2.11. This happens in other scenarios that mercator I've seen this behavior also only using UTM and TileCache.

@elemoine
OpenLayers member

Someone just opened http://trac.openlayers.org/ticket/3643. I haven't looked into detail but the issues sound related.

@elemoine
OpenLayers member

It may be a Chrome 18 issue. See http://code.google.com/p/chromium/issues/detail?id=112713. It may be worth trying with Chrome 19 (dev channel or something).

@jorix

... yes looks like it may be a bug in Chrome.

I can confirm that this bug does not appear using old version 13.0.782.220, and it fails using Vista and XP with versions 18.0.1025.142 and 18.0.1025.151 (updated today)

... and it is curious, the problem appears when decrease the width of the window, but does not occur when increases.

@probins

I just tried this in Chrome 19.0.1084.15 (the latest dev channel version), and I see a problem, but not quite the one described above. If you decrease window width (not something I do very often in real life), the baselayer shifts position (so map is still centred on same position) but the vector layer doesn't. Popup display is correct. I see the same problem with my own vector-on-baselayer pages.

Is this related to #393?

@jorix

@probins

(not something I do very often in real life)

It is more common than it seems, when you have a side (left or right) that can hide and show (as in Google Maps)

@probins

just been playing with this a bit more. If you start off with browser occupying the whole screen and then reduce it bit by bit, the vector layer moves correctly with the baselayer to start off with, but then at a certain point it stops moving. If you then expand the window bit by the bit the reverse happens; after a certain point it starts moving correctly again.

Whatever's causing this, it looks to me like a browser bug and not an OL problem. I don't see the same problem with another webkit browser I have installed, though they may well be using very different versions..

@probins

also, I don't see the problem with the Highcharts example, so I don't think this is the same issue

@elemoine
OpenLayers member
@kurteknikk

Confirmed, i'm having this issue, too... Is it possible to add this as a Milestone in one of the near releases ? I think this is a show stopper in some cases.

@jordanfbrown

This issue is also occurring for me.

@blazek

We have the same problem, it seems that Chrome >= 18 does not resize svg elements correctly when the map div is resized.

I have solved it forcing svg resize on each map resize.

@jorix

Although it was a bug in Chrome not worth making a patch on 2.12 to avoid the problem?

@kurteknikk

@blazek stupid question but can you help me force the svg resize on each map resize, at least it looks better because this is a real show stopper for me.

@jorix

@kurteknikk : is not the same, so far I'm using this:

    var isChrome = /(chrome)[ \/]([\w.]+)/i.test(navigator.userAgent);
    if (isChrome) { // Bug in SVG + Chrome-18
        OpenLayers.Layer.Vector.prototype.renderers = ['Canvas'];
    }

@blazek 's proposal sounds interesting

@kurteknikk

@jorix thanks apparently your solution also works. I think we should have a patch because whoever is using Openlayers on production systems, have to do something about this, we can't just leave it because it's Chrome.

@jorix

@kurteknikk Yes yes of course! in production is unacceptable.

have to do something about this

I completely agree 101%!

@blazek

@kurteknikk : I have overwritten updateSize() within a class which inherits from OpenLayers.Map, it is using Ext but you can do something similar without Ext

Map = OpenLayers.Class(OpenLayers.Map, {
  updateSize: function() {
    OpenLayers.Map.prototype.updateSize.apply(this, arguments);
    if ( Ext.isChrome ) {
       var mapDiv = Ext.get(this.div);
       var elements = mapDiv.select("svg").elements;
       for ( var i = 0; i < elements.length; i++ ) {
         var svg = Ext.get(elements[i]);
         svg.setSize( mapDiv.getSize() );
       }
    }
  }
}

I am not sure if using the same size as map div is always correct, there could be some borders on divs the svg is within.

@kurteknikk

@blazek Thanks for your code, I don't use Ext it should be pretty easy to convert to JQuery.

I would definately vote for a patch in Openlayers so it will be tested with different browsers and systems and if there's any issue we can fix it.

@jorix

@elemoine I am writing to you as coordinator of the 2.12 release.

I think this bug is very worrying, so I have been researching...

I have developed a minimal test that reproduces the problem (no OL, of course) see http://jorix.github.com/OL-392/test-bug.html (I have found the code that ensures the problem, see L24)

It may be interesting to open an incident on http://code.google.com/p/chromium/issues/list? (if I open it is likely that they ignore it)
Investigate how to bypass the bug?

@elemoine
OpenLayers member

If we can easily work around this bug then yes, we should fix that in OL 2.12. I haven't investigated the problem myself so I don't know.

@jorix

I'll try, but so far has been very resistant to my attempts.

Another question is report it to Chromium (requires very few lines of code to reproduce the problem, see previous link) If I do it the answer will not be as good as if the OpenLayers team does, I think.

@elemoine
OpenLayers member

You don't weigh less than me.

@elemoine elemoine closed this May 13, 2012
@elemoine elemoine reopened this May 13, 2012
@jorix

The solution seems simple: add style = "position: absolute;" on the SVG I guess that is applicable on OL: is there any downside?

Try: http://jorix.github.com/OL-392/test-bug2.html to me works.

@elemoine
OpenLayers member

Good spotting @jorix. I'm not sure what the implications of this could be. I'm interested in @ahocevar's opinion on this. It it works in all browsers (IE 9 included) then I guess we can have it in 2.12.

@jorix

@elemoine

I try:

    createRenderRoot: function() {
        var svg = this.nodeFactory(this.container.id + "_svgRoot", "svg");
        svg.style.position = "absolute";
        return svg
    },

on SVG.js and seems OL works...

@elemoine
OpenLayers member

If the tests pass in FF, Chrome and IE 9, and if all the vector-related examples continue to work then I'd say let get this in 2.12. Thanks again!

@elemoine
OpenLayers member

Folks, @jorix is proposing in #467 a simple fix for this bug, in this branch. The fix works for @probins, @jorix and me. It would be helpful (and much appreciated) if others could test the patch in real applications.

For those of you not too familiar with Git here's how to check out @jorix's branch (this assumes you already have a local openlayers clone):

$ git remote add jorix http://github.com/jorix/openlayers
$ git fetch jorix
$ git checkout jorix/392

Thanks.

@elemoine
OpenLayers member

#467 is now closed.

@elemoine elemoine closed this May 16, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment