From 71d2a2b0ed8205715a49d7856fca9dfc7a325757 Mon Sep 17 00:00:00 2001 From: Malvoz <26493779+Malvoz@users.noreply.github.com> Date: Mon, 17 Aug 2020 17:58:42 +0200 Subject: [PATCH 1/3] Reset inherited CSS properties --- src/mapml-viewer.js | 1 + src/web-map.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 7b49bd685..9adb0babc 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -104,6 +104,7 @@ export class MapViewer extends HTMLElement { let mapDefaultCSS = document.createElement('style'); mapDefaultCSS.innerHTML = `:host {` + + `all: initial;` + // Reset inherited properties from html/body, as some properties may interfere to the point where they break the layout (https://developers.google.com/web/fundamentals/web-components/shadowdom#reset). `contain: content;` + // Contain layout and paint calculations within the map element. `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default. `overflow: hidden;` + // Make the map element behave and look more like a native element. diff --git a/src/web-map.js b/src/web-map.js index cf4ee6656..96fc297fa 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -111,6 +111,7 @@ export class WebMap extends HTMLMapElement { let mapDefaultCSS = document.createElement('style'); mapDefaultCSS.innerHTML = `map[is="web-map"] {` + + `all: initial;` + // Reset inherited properties from html/body, as some properties may interfere to the point where they break the layout (https://developers.google.com/web/fundamentals/web-components/shadowdom#reset). `contain: content;` + // Contain layout and paint calculations within the map element. `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default. `overflow: hidden;` + // Make the map element behave and look more like a native element. From 80e6c98989df844aa8c01f9f34fa76daa2338fee Mon Sep 17 00:00:00 2001 From: Malvoz <26493779+Malvoz@users.noreply.github.com> Date: Mon, 17 Aug 2020 21:59:18 +0200 Subject: [PATCH 2/3] Reset inheritance comment update --- src/mapml-viewer.js | 2 +- src/web-map.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 9adb0babc..64300eb73 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -104,7 +104,7 @@ export class MapViewer extends HTMLElement { let mapDefaultCSS = document.createElement('style'); mapDefaultCSS.innerHTML = `:host {` + - `all: initial;` + // Reset inherited properties from html/body, as some properties may interfere to the point where they break the layout (https://developers.google.com/web/fundamentals/web-components/shadowdom#reset). + `all: initial;` + // Reset inherited properties from html/body, as some properties may cause unexpected issues with the map element's components (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/140). `contain: content;` + // Contain layout and paint calculations within the map element. `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default. `overflow: hidden;` + // Make the map element behave and look more like a native element. diff --git a/src/web-map.js b/src/web-map.js index 96fc297fa..20696ca69 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -111,7 +111,7 @@ export class WebMap extends HTMLMapElement { let mapDefaultCSS = document.createElement('style'); mapDefaultCSS.innerHTML = `map[is="web-map"] {` + - `all: initial;` + // Reset inherited properties from html/body, as some properties may interfere to the point where they break the layout (https://developers.google.com/web/fundamentals/web-components/shadowdom#reset). + `all: initial;` + // Reset inherited properties from html/body, as some properties may cause unexpected issues with the map element's components (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/140). `contain: content;` + // Contain layout and paint calculations within the map element. `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default. `overflow: hidden;` + // Make the map element behave and look more like a native element. From 052d25a8fb8ae93377f57df67e9a3b7963102beb Mon Sep 17 00:00:00 2001 From: Malvoz <26493779+Malvoz@users.noreply.github.com> Date: Tue, 18 Aug 2020 15:20:28 +0200 Subject: [PATCH 3/3] Reset inheritance comment update --- src/mapml-viewer.js | 2 +- src/web-map.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 64300eb73..812794cd0 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -104,7 +104,7 @@ export class MapViewer extends HTMLElement { let mapDefaultCSS = document.createElement('style'); mapDefaultCSS.innerHTML = `:host {` + - `all: initial;` + // Reset inherited properties from html/body, as some properties may cause unexpected issues with the map element's components (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/140). + `all: initial;` + // Reset properties inheritable from html/body, as some inherited styles may cause unexpected issues with the map element's components (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/140). `contain: content;` + // Contain layout and paint calculations within the map element. `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default. `overflow: hidden;` + // Make the map element behave and look more like a native element. diff --git a/src/web-map.js b/src/web-map.js index 20696ca69..fa0b62969 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -111,7 +111,7 @@ export class WebMap extends HTMLMapElement { let mapDefaultCSS = document.createElement('style'); mapDefaultCSS.innerHTML = `map[is="web-map"] {` + - `all: initial;` + // Reset inherited properties from html/body, as some properties may cause unexpected issues with the map element's components (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/140). + `all: initial;` + // Reset properties inheritable from html/body, as some inherited styles may cause unexpected issues with the map element's components (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/140). `contain: content;` + // Contain layout and paint calculations within the map element. `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default. `overflow: hidden;` + // Make the map element behave and look more like a native element.