title: Openlayers tiles not loading on a tabed web page
body: <p>If I have three tabs on a page and the openlayer map is on the second page which is not current by default.
  The map tiles does not load when I click on the second tab. the map tiles load only when I resize the web document window. this is happening on all the browsers. below is the code for your reference.
  <a href="https://jsfiddle.net/889mvdo3/" rel="nofollow noreferrer">jsfiddle link</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"&gt;
  &lt;style&gt;
  .map {
          height: 400px;
          width: 100%;
        }
  body {font-family: "Lato", sans-serif;}
  
  /* Style the tab */
  div.tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
  }
  
  /* Style the buttons inside the tab */
  div.tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  div.tab button:hover {
      background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  div.tab button.active {
      background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
  }
  
  /* Style the close button */
  .topright {
      float: right;
      cursor: pointer;
      font-size: 20px;
  }
  
  .topright:hover {color: red;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;Click on the x button in the top right corner to close the current tab:&lt;/p&gt;
  
  &lt;div class="tab"&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen"&gt;London&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Paris')"&gt;Paris&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Tokyo')"&gt;Tokyo&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="London" class="tabcontent"&gt;
    &lt;span onclick="this.parentElement.style.display='none'" class="topright"&gt;x&lt;/span&gt;
    &lt;h3&gt;London&lt;/h3&gt;
    &lt;p&gt;London is the capital city of England.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="Paris" class="tabcontent"&gt;
    &lt;span onclick="this.parentElement.style.display='none'" class="topright"&gt;x&lt;/span&gt;
    &lt;h3&gt;Paris&lt;/h3&gt;
    &lt;p&gt;Paris is the capital of France.&lt;/p&gt;
    &lt;div id="map" class="map"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="Tokyo" class="tabcontent"&gt;
    &lt;span onclick="this.parentElement.style.display='none'" class="topright"&gt;x&lt;/span&gt;
    &lt;h3&gt;Tokyo&lt;/h3&gt;
    &lt;p&gt;Tokyo is the capital of Japan.&lt;/p&gt;
  &lt;/div&gt;
  &lt;script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
  function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
  }
  
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();
  
      var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([37.41, 8.82]),
            zoom: 4
          })
        });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>