-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Do not round to the nearest integer #4745
Comments
Rounding Path coords to nearest integer do provide crisper line (and potentially better performance since browser don't have draw additional pixels for anti-aliasing). In your case, perhaps an option in Path that hint at the renderer to not round the coordinates? |
The trade-off for this "optimization" is accuracy, which isn't a price one should pay. The rounding doesn't even seem to optimize anything: |
Rounding the coordinates is an artifact to make things render right in some browsers (think old IE). Having non-integer values for some CSS transforms might break things. So, even if this is a good idea, I don't think it can make it to 1.0, an it will need testing. @Ceremony64 Please state the version of Leaflet you're using, and consider sending a pull request with your changes - that would make things easier. |
Oh, BTW, Safari will be the major source of headaches related to this, see e.g. https://twitter.com/Rich_Harris/status/762820715439591424 |
I was on 1.0 RC2 and just updated to RC3 today. Heres the pull: #4808 |
This is an old post, but possibly gives yet another reason path coordinates are rounded: https://www.mapbox.com/osmdev/2012/11/20/getting-serious-about-svg/ If you scroll down to the heading "Rounded pixels give a boost", you can see that it gives @mourner as the source for this 20% performance boost. Would be interesting to benchmark if this is still true in modern browsers. |
I've been using this example as a performance test, together with Chrome's timeline feature: http://playground-leaflet.rhcloud.com/tija/edit?html,output From this small test, I can not measure any significant difference in using One thing to note though is that the data looks much better without the rounding. We still have to do the browser testing mentioned by @IvanSanchez in #4808, though. |
Small compatibility update: I have not tested it using the canvas renderer tho, only the default SVG renderer. |
@Ceremony64 the problem here is mostly that Leaflet still maintains compatibility with very, very not up to date browsers, primarily IE8, 9 and 10. Safari on Mac is definitely also very important for us to test. Except for that, I'd love to see us moving ahead on this! |
I have no means to test on Mac, cuz I don't own one. I could test Safari on iOS tho! (no issues) Also, I believe it is time to abandon IE, just like MS did the moment they released it... lol So I recommend dropping support for IE8 at the very least, maybe also dropping support for IE9 and 10. P.S. my usecase doesn't support IE10 and below, as I use google maps within leaflet, which requires DOM mutation observer, which is only supported by IE11 and good browsers |
@perliedman @Ceremony64 how can help you moving this ahead? I have a Mac so I can help you with this one |
@giacomoburattini we need to check all the boxes in #4808! Major problem is testing all the old IE versions. |
@perliedman what's the output you expect exactly? |
@perliedman I think we can scrap IE8 support already, as Leaflet 1.2 no longer works in that ancient browser: @giacomoburattini I created a crude test: https://a.uguu.se/AtGM4ieiYR35_leaflet.zip (24hour limit... couldn't find a decent hoster behind company fw...) |
@perliedman can you please confirm whether IE8 is supported yet? Can you also please confirm that running the test provided by @Ceremony64 is enough? |
Hi guys, If the latest version actually doesn't work in IE8, that's an issue we should address, not a reason to drop the claimed support. That no one has complained about this might however be an indication that we should consider dropping the support for future versions; again, that is not my decision in that case, although I could certainly weigh in. As for the test, unfortunately it looks like it's lost for now. I'm pressed for time at the moment, so I can't throw together a test example just now. |
@perliedman I downloaded the example test prepared by @Ceremony64 and I uploaded it to Dropbox, (here the link https://www.dropbox.com/s/7c6lhiy4erc1x81/AtGM4ieiYR35_leaflet.zip?dl=0) so I can run the tests on the requested browsers. |
@giacomoburattini @perliedman |
@perliedman I'm sorry to bother you again, but this fix is something that I would like to move on. Just for the sake of the discussion, for the future would be awesome to think about having some structured integration tests (maybe based on image comparison?) to prevent regressions from this kind of changes (sauce labs for example offers a "free for open source" service to run the functional tests in all the browsers we need) |
@danydev For me, screenshots or whatever to just make sure vectors actually still work after this change is ok. While I don't think we care too much about performance in old IE versions, it's also important that it's still usable in those browsers, of course. |
@perliedman @Ceremony64 here the screenshots for the requested browsers. The patched version works well. Please note that IE8 appears to be broken. Update: after some investigation I discovered that the issue with IE8 was due to the usage of |
@perliedman can we move this ahead? |
@giacomoburattini it's not entirely clear which browsers are tested here: I can see desktop Safari 8, IE 9, IE 11, but which iOS version are tested above? If IE8 is fixed now, can we test that as well before moving ahead? |
@perliedman updated my comment to specify the iOS version tested (the one you asked to test here #4808) |
@perliedman looks like everything we need to move the case has been provided, what can we do to move this case on? This fix is really needed for whoever is gonna use Leaflet to render shapes in svg |
@danydev it looks like IE8 still hasn't been tested; easy to brush off as unimportant, but I don't have the mandate to say we should drop/ignore it. Also, personally I don't have the time to deal with the possible fallout from making a change like this (just about any change is complicated at this point since Leaflet is used in so many places in so different use cases), so I'm reluctant to merge. @cherniavskii @ghybs sorry to drag you into this, but I'd say go on this, any objections or hesitation on your part? |
Hi @perliedman, Thanks for the notice. Sorry I do not have enough time currently either to look into this… 😞 |
BTW an easy workaround for now for people needing this is simply to override the method in your script. Copy the below snippet before instantiating your map: L.Map.include({
latLngToLayerPoint: function (latlng) {
var projectedPoint = this.project(L.latLng(latlng));
return projectedPoint._subtract(this.getPixelOrigin());
}
}); |
Given that there's an easy workaround @ghybs provided above, I think it would be better to close this issue for now |
The workaround consists in overriding the library method with the proper fix proposed in the PR. Also, it looks like we're not so distant for taking an action on this fix. Given @giacomoburattini tested it in (almost) all the Leaflet supported browser, I don't see strong reason to not having it right. My understatement is that this round has been introduced because IE8 does not deal with fractional numbers when rendering svg, and having it right would just have better rendering on all the other browsers (as screenshot shows) |
The fix works pretty well, although I notice that the initial points of GeoJSON contours still get rounded to integers, leading to a sometimes gappy appearance. I'll try to have a look at some point whether a second override is needed somewhere ... |
Are you talking about the toGeoJSON methods? It takes the precision as a parameter. Is that the cause? |
Unfortunately, leaflet rounds path coordinates to the closest integer before drawing. This works okay for most cases, unless you have a grid like drawing. In my case, I am drawing solar panels, which just look awkward:
Quick and dirty, I changed the code, so that the shape gets rounded to the first decimal place, and it looked just great:
I am unsure about the performance impact, however I noticed no (additional) impact on performance, even after playing around with over 7000 of these polygons.
Same issue when using the method latLngToLayerPoint:
Rounded integer X/Y values of LatLng points are inaccurate, especially at low zoom levels.
I am not sure why these are being rounded in the first place.
The text was updated successfully, but these errors were encountered: