How can we get rid of the scrollbars on the map

[prushforth]

For some reason, scrollbars show up on some maps, but not others, and I'm wondering if we can banish them, since the primary means of navigating the map is pan/zoom provide by other means.

[Malvoz]

I believe the only cases where scrollbars would show up is when the map is covering the entire document, such as in the Ottawa Restaurants experiment. This is expected, because the size of the map element (width: 100%; height: 100%; relative to the body) + the size of the default border is larger than the document so there's an overflow on the document itself (the scrollbars don't belong to the map). The same would happen if you set width/height to 100% for an iframe as well.

There are different ways to go about ensuring scrollbars don't show up (together with max-width: 100% for responsiveness):

• Set box-sizing: border-box; on the map element. In fact this is useful as a global rule, and is used in many "CSS resets", for example in CSS Remedy.
• Remove the border from the map element using CSS border: none (or HTML framborder="0", this is generally not recommended because it is deprecated, but I thought we could support it just as it is supported in most/all browsers for iframes)
• Set html { overflow: hidden; }. This solution is very situational, it would work well in cases where the map element is the only element on a web page.

[prushforth]

Thanks for these suggestions, I'll play around with them and see if I can get a better feel for it.

[Malvoz]

While we could make the map viewers box-sizing: border-box by default, this is unlikely to be the case in a standardized map viewer, so if we did that authors would not set box-sizing: border-box when using the polyfill because they don't get these awkward scrollbars, but once there's a native implementation and the polyfill does not apply then everyone would all of a sudden have these scrollbars (under the conditions that they create an overflow on the document).

Also, I see that there are still scrollbars happening in the experiments repo, I'll fix those.

[Malvoz]

To remove the scrollbars in Firefox, vertical-align: middle is also required...

[Malvoz]

The following styles should ensure a map that isn't larger or wider than 100% should never cause scrollbars:

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

mapml-viewer {
  max-width: 100%;
  vertical-align: middle;
}

[Malvoz]

Closing per #350 (comment). To be documented (Maps4HTML/web-map-doc#26).

[Malvoz]

One difference between <map is="web-map"> and <mapml-viewer> is that a declaration such as:

*, ::before, ::after {
  box-sizing: border-box;
}

is not unset for <mapml-viewer> but is for <map> because they use different selectors with different specificity for the "reset".

For this reason we should set box-sizing: inherit for <map is="web-map">, such that both elements behave the same (do not reset the box-sizing that the author applied) when that very common global declaration is used.