Q:

Polygon Intersection on map shows offset

I'm trying to find intersection area between 2 polygons drawn on a map.
I've TurfJS intersect method to find intersection between 2 polygons.
It works good for smaller areas but for larger area polygons it starts showing some offset at the intersection points, the offset grows as the distance grows.
This is also seen only for polygons with slanting lines (vertical and horizontal line intersections seem to work well).
I've created a JSFiddle for this : https://jsfiddle.net/cLe6yo9d/
I'm trying to find the intersection between the black and blue polygons, what I get is shown as the red polygon which is seen shifted from where it should be.
var mapLayer = L.map('mapid', {
 zoomAnimation: false
});
var pid = 'karan44.pdmio34k';
var at = 'pk.mapbox-access-token-goes-here';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  id: pid,
  accessToken: at
}).addTo(mapLayer);

var polygon1 = turf.polygon([
  [
    [3.405762, 51.395350],
    [5.009766, 53.340303],
    [7.141113, 53.653999],
    [5.822754, 51.037508],
    [3.405762, 51.395350]
  ]
], {
  "fill": "#00000F",
  "stroke": "#00000F",
  "stroke-width": 1
});

var polygon2 = turf.polygon([
  [
    [0.241699, 54.173488],
    [10.162354, 50.908012],
    [8.854980, 50.062208],
    [0.241699, 54.173488]
  ]
], {
  "fill": "#0000FF",
  "stroke": "#0000FF",
  "stroke-width": 1
});

var polygon = turf.intersect(polygon1, polygon2);
polygon.properties = {
  "fill": "#FF0000",
  "stroke": "#FF0000",
  "stroke-width": 1
};

L.mapbox.featureLayer().setGeoJSON(polygon1).addTo(mapLayer);
L.mapbox.featureLayer().setGeoJSON(polygon2).addTo(mapLayer);

L.mapbox.featureLayer().setGeoJSON(polygon).addTo(mapLayer);
mapLayer.setView([52.754260888947776, 5.72100021667583], 8);

This fiddle has been created by modifying turf.intersect example to reproduce the issue.
Hoping someone could help me understand what is going wrong.

A:

This issue came back again, and finally found the solution to it. Sharing just in case it might be helpful to someone else.
What I understood about the issue is that turf.js and LeafletJs use different projection systems. So I manually projected coordinates to EPSG:3857 before passing to turfjs methods and then transforming turfjs result back to EPSG:4326 before passing to Leaflet.
https://jsfiddle.net/5Ls3vw8d/
var mapLayer = L.map('mapid', {
    zoomAnimation: false
});
var pid = 'karan44.pdmio34k';
var at = 'pk.mapbox-access-token-goes-here';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  id: pid,
  accessToken: at
}).addTo(mapLayer);
//Construct Truf projection polygons
var polygon1 = turf.polygon([[
    proj4("EPSG:4326","EPSG:3857",[3.405762, 51.395350]),
    proj4("EPSG:4326","EPSG:3857",[5.009766, 53.340303]),
    proj4("EPSG:4326","EPSG:3857",[7.141113, 53.653999]),
    proj4("EPSG:4326","EPSG:3857",[5.822754, 51.037508]),
    proj4("EPSG:4326","EPSG:3857",[3.405762, 51.395350])
]], {
  "fill": "#00000F",
  "stroke": "#00000F",
  "stroke-width": 1
});
var polygon2 = turf.polygon([[
    proj4("EPSG:4326","EPSG:3857",[0.241699, 54.173488]),
    proj4("EPSG:4326","EPSG:3857",[10.162354, 50.908012]),
    proj4("EPSG:4326","EPSG:3857",[8.854980, 50.062208]),
    proj4("EPSG:4326","EPSG:3857",[0.241699, 54.173488])
]], {
  "fill": "#0000FF",
  "stroke": "#0000FF",
  "stroke-width": 1
});
var polygon = turf.intersect(polygon1, polygon2);
polygon.properties = {
  "fill": "#FF0000",
  "stroke": "#FF0000",
  "stroke-width": 1
};
//Convert all polygons back to Leaflet projection
for(var i in polygon1.geometry.coordinates[0]) {
    polygon1.geometry.coordinates[0][i] = proj4("EPSG:3857","EPSG:4326",polygon1.geometry.coordinates[0][i]);
}
for(var i in polygon2.geometry.coordinates[0]) {
    polygon2.geometry.coordinates[0][i] = proj4("EPSG:3857","EPSG:4326",polygon2.geometry.coordinates[0][i]);
}
for(var i in polygon.geometry.coordinates[0]) {
    polygon.geometry.coordinates[0][i] = proj4("EPSG:3857","EPSG:4326",polygon.geometry.coordinates[0][i]);
}
L.mapbox.featureLayer().setGeoJSON(polygon1).addTo(mapLayer);
L.mapbox.featureLayer().setGeoJSON(polygon2).addTo(mapLayer);
L.mapbox.featureLayer().setGeoJSON(polygon).addTo(mapLayer);
mapLayer.setView([52.754260888947776, 5.72100021667583], 8);

