diff --git a/index.html b/index.html
index b3c429da..bffa0d29 100644
--- a/index.html
+++ b/index.html
@@ -354,9 +354,7 @@
           <g id="statePaths"></g>
           <g id="defs-emblems"></g>
           <mask id="land"></mask>
-          <mask id="water">
-            <rect x="0" y="0" width="100%" height="100%" fill="white" />
-          </mask>
+          <mask id="water"></mask>
           <mask id="fog" style="stroke-width: 10; stroke: black; stroke-linejoin: round; stroke-opacity: 0.1">
             <rect x="0" y="0" width="100%" height="100%" fill="white" stroke="none" />
           </mask>
@@ -8162,11 +8160,11 @@
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
     <script defer src="modules/io/save.js?v=1.107.4"></script>
-    <script defer src="modules/io/load.js?v=1.107.4"></script>
+    <script defer src="modules/io/load.js?v=1.108.0"></script>
     <script defer src="modules/io/cloud.js?v=1.106.0"></script>
     <script defer src="modules/io/export.js?v=1.100.00"></script>
 
-    <script defer src="modules/renderers/draw-features.js?v=1.106.0"></script>
+    <script defer src="modules/renderers/draw-features.js?v=1.108.0"></script>
     <script defer src="modules/renderers/draw-borders.js?v=1.104.0"></script>
     <script defer src="modules/renderers/draw-heightmap.js?v=1.104.0"></script>
     <script defer src="modules/renderers/draw-markers.js?v=1.107.0"></script>
diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js
index afa91fca..6622e3b5 100644
--- a/modules/dynamic/auto-update.js
+++ b/modules/dynamic/auto-update.js
@@ -963,7 +963,6 @@ export function resolveVersionConflicts(mapVersion) {
     defs.select("#land").selectAll("path, use").remove();
     defs.select("#water").selectAll("path, use").remove();
     viewbox.select("#coastline").selectAll("path, use").remove();
-    drawFeatures();
 
     // v1.104.0 introduced bugs with state borders
     regions
@@ -983,4 +982,16 @@ export function resolveVersionConflicts(mapVersion) {
     if (layerIsOn("toggleMarkers")) drawMarkers();
     if (layerIsOn("toggleMilitary")) drawMilitary();
   }
+
+  if (isOlderThan("1.108.0")) {
+    // v1.108.0 changed features rendering method
+    pack.features.forEach(f => {
+      // fix lakes with missing group
+      if (f?.type === "lake" && !f.group) f.group = "freshwater";
+    });
+    drawFeatures();
+
+    // some old maps has incorrect "heights" groups
+    viewbox.selectAll("#heights").remove();
+  }
 }
diff --git a/modules/io/load.js b/modules/io/load.js
index 6083dc1a..ccfccecb 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -472,7 +472,7 @@ async function parseLoadedData(data, mapVersion) {
 
     {
       // dynamically import and run auto-update script
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.107.0");
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.108.0");
       resolveVersionConflicts(mapVersion);
     }
 
diff --git a/modules/renderers/draw-features.js b/modules/renderers/draw-features.js
index 74e16c87..afd26afa 100644
--- a/modules/renderers/draw-features.js
+++ b/modules/renderers/draw-features.js
@@ -2,50 +2,48 @@
 
 function drawFeatures() {
   TIME && console.time("drawFeatures");
-  const featurePaths = defs.select("#featurePaths");
-  const landMask = defs.select("#land");
-  const waterMask = defs.select("#water");
+
+  const html = {
+    paths: [],
+    landMask: [],
+    waterMask: ['<rect x="0" y="0" width="100%" height="100%" fill="white" />'],
+    coastline: {},
+    lakes: {}
+  };
 
   for (const feature of pack.features) {
     if (!feature || feature.type === "ocean") continue;
 
-    featurePaths
-      .append("path")
-      .attr("d", getFeaturePath(feature))
-      .attr("id", "feature_" + feature.i)
-      .attr("data-f", feature.i);
+    html.paths.push(`<path d="${getFeaturePath(feature)}" id="feature_${feature.i}" data-f="${feature.i}"></path>`);
 
     if (feature.type === "lake") {
-      landMask
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i)
-        .attr("fill", "black");
-      lakes
-        .select(`#${feature.group}`)
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i);
+      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
+
+      const lakeGroup = feature.group || "freshwater";
+      if (!html.lakes[lakeGroup]) html.lakes[lakeGroup] = [];
+      html.lakes[lakeGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
     } else {
-      landMask
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i)
-        .attr("fill", "white");
-      waterMask
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i)
-        .attr("fill", "black");
-      const coastlineGroup = feature.group === "lake_island" ? "#lake_island" : "#sea_island";
-      coastline
-        .select(coastlineGroup)
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i);
+      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="white"></use>`);
+      html.waterMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
+
+      const coastlineGroup = feature.group === "lake_island" ? "lake_island" : "sea_island";
+      if (!html.coastline[coastlineGroup]) html.coastline[coastlineGroup] = [];
+      html.coastline[coastlineGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
     }
   }
 
+  defs.select("#featurePaths").html(html.paths.join(""));
+  defs.select("#land").html(html.landMask.join(""));
+  defs.select("#water").html(html.waterMask.join(""));
+
+  Object.entries(html.coastline).forEach(([group, paths]) => {
+    coastline.select("#" + group).html(paths.join(""));
+  });
+
+  Object.entries(html.lakes).forEach(([group, paths]) => {
+    lakes.select("#" + group).html(paths.join(""));
+  });
+
   TIME && console.timeEnd("drawFeatures");
 }
 
diff --git a/versioning.js b/versioning.js
index 20591d39..8de59ae4 100644
--- a/versioning.js
+++ b/versioning.js
@@ -13,7 +13,7 @@
  * Example: 1.102.2 -> Major version 1, Minor version 102, Patch version 2
  */
 
-const VERSION = "1.107.4";
+const VERSION = "1.108.0";
 if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format or parsing function");
 
 {