SVG layer images do not display in Mobile Safari in portrait mode

Question

I'm building a map with several static images SVG layers. Each layer has a maxResolution set so that they only appear at certain zoom levels:

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Image({
        source: first,
        maxResolution: 4
      }),
      new ol.layer.Image({
        source: second,
        maxResolution: 2
      }),
      new ol.layer.Image({
        source: third,
        maxResolution: 1
      }),
    ],
    view: view
  });

In Safari and Chrome on my Mac, this works perfectly.

However, on MobileSafari, the three layers only appear when I rotate the phone into horizontal mode.

Any idea what could be causing this issue?

Answer 1

Turns out the problem was not with the layers / resolution, but with the size of the map container. I resized using CSS:

html, body {
  height: 99%;
  width: 100%;
}

Which fixed the problem -- it didn't like 100% height.