title: Chrome and fullscreen api: resize element to fill the fullscreen window not working
body: <p>Using the following code:</p>
  
  <pre><code>function _launchIntoFullscreen (pElement) {
      if(pElement.requestFullscreen) {
          pElement.requestFullscreen();
      } else if(pElement.mozRequestFullScreen) {
          pElement.mozRequestFullScreen();
      } else if(pElement.webkitRequestFullscreen) {
          pElement.webkitRequestFullscreen();
      } else if(pElement.msRequestFullscreen) {
          pElement.msRequestFullscreen();
      }
  }
  </code></pre>
  
  <p>I can switch a single element to fullscreen mode, e.g. for a dijit.form.ContentPane named "canvas"</p>
  
  <pre><code>_launchIntoFullscreen(canvas.domNode);
  </code></pre>
  
  <p>works fine, but unfortunately with Chrome the element is not resized to fill all of the fullscreen window. The size remains the same and it is centered on screen.</p>
  
  <p>I have added the following to the CSS:</p>
  
  <pre><code>:-webkit-full-screen {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: none;
  }
  </code></pre>
  
  <p>but the only change is the position, which is now the upper left corner, but the size is still the same.</p>
  
  <p>Additional information: The structure of the page is</p>
  
  <pre><code>&lt;div class="page-wrapper" style="width:100%; height:100%;"&gt;
    &lt;div id="toolbar" class="toolbar"&gt;&lt;/div&gt;
    &lt;div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" design="sidebar" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 100%; height: 100%; padding: 0px 0px 32px 0px;"&gt;
      &lt;div id="projectPane" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="left" splitter="true" maxSize="Infinity" doLayout="true" style="width: 220px; padding: 0px;"&gt;
        &lt;div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;"&gt;
          &lt;div id="treeParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Palette"  data-dojo-props="selected:true" style="padding:0px;"&gt;&lt;/div&gt;
          &lt;div id="onlineParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Online"  data-dojo-props="selected:false" style="padding:0px;"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="workAreaContainer" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity" doLayout="true" style="padding: 0px;"&gt;
        &lt;div id="workArea" class="workArea" data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;" data-dojo-props="tabPosition: 'right-h'"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="bottom" data-dojo-type="dijit/layout/TabContainer" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="bottom" splitter="true" maxSize="Infinity" doLayout="true" style="width: 100%; height: 10%; padding: 0px;"&gt;
        &lt;div id="log" class="log" title="Log" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" maxSize="Infinity" doLayout="false" style="height:100%;padding:0px;overflow:auto;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="properties" class="properties" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="right" splitter="true" minSize=0 maxSize="Infinity" doLayout="false" style="width:250px;padding: 0px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>canvas is created dynamically:</p>
  
  <pre><code>var lTabContainer = dijit.byId("workArea");
  var canvas = new ContentPane({
              title: this.keys.pouname, //"Main",
              //id: "surface",
              class: "surfaceX",
              extractContent: "false",
              preventCache: "false",
              preload: "false",
              refreshOnShow: "false",
              maxSize: "Infinity",
              doLayout: "false",
              "data-dojo-props": "selected:true",
              style: "padding: 0px;"
  });
  lTabContainer.addChild(canvas);
  </code></pre>
  
  <p>What am I doing wrong here?</p>
  
  <p>In Firefox everything behaves as expected even without the CSS.</p>
  
  <p>Thanks a lot for giving me insight into a solution.</p>