title: SVG foreignObject behaves as though absolutely positioned in Webkit browsers
body: <p>I'm working with SVG in an HTML document. For some reason in Chrome, any content in any <code>&lt;foreignObject&gt;</code> element appears in the top left corner of the <code>&lt;svg&gt;</code> element's parent element; as though the <code>&lt;foreignObject&gt;</code> element was absolutely positioned or something. I don't have this problem in Firefox.</p>
  
  <p>What could be causing this? How can I fix it?</p>
  
  <p>Here is my test case: (<a href="http://jsfiddle.net/XLYzs/" rel="noreferrer">the example is also on JsFiddle</a>)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;SVG bug in Chrome?&lt;/title&gt;
  &lt;style type="text/css"&gt;
  code {
      background: #FFFAEE;
  }
  pre code {
      display:block;
  }
  .widget-body {
      background:yellow;
      position: relative; /* This is the problem! */
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;h1&gt;SVG bug in Chrome?&lt;/h1&gt;
  &lt;div&gt;
      &lt;p&gt;
          The elemts in the &amp;lt;foreignObject&amp;gt; are not positioned properly unless the &lt;code&gt;.widget-body&lt;/code&gt; rule is changed to:
                  &lt;pre&gt;&lt;code&gt;.widget-body {
      background:yellow;
  /*  position: relative; /* This is the problem! */
      position: static;
  }&lt;/code&gt;&lt;/pre&gt;
      &lt;/p&gt;
          &lt;h2&gt;The Example:&lt;/h2&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="800"&gt;
      &lt;g&gt;
      &lt;g transform="scale(1) translate(100, 200)" style="cursor: move;"&gt;&lt;foreignobject pointer-events="fill" width="300" height="350"&gt;
      &lt;body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;"&gt;
      &lt;table style="border-collapse: collapse; font-size: 11px; color: rgb(119, 68, 0); font-family: Arial,Helvetica; font-weight: normal; border-style: none;"&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td style="text-align: center; vertical-align: middle; white-space: nowrap;"&gt;
              &lt;div style="width:300px;height:350px;position:static;"&gt;
                  &lt;div class="widget" style="width: 300px;"&gt;
                      &lt;div style="-moz-user-select: none;"&gt;
                          &lt;span&gt;My Widget Title&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div class="widget-body" style="width: 298px; height: 323px;"&gt;
                              &lt;div style="width: 298px; height: 323px;"&gt;
                                  &lt;div style="width: 298px; height: 323px;"&gt;
                                      This position of this yellow square &lt;br /&gt;should approximately (100, 200)
                                      &lt;div style="position:absolute;bottom:0;right:0;background:red;color:white;font-weight:bold;"&gt;
                                          This red square &lt;br /&gt;should be &lt;br /&gt;in the bottom right corner &lt;br /&gt;of the yellow square.
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/body&gt;
      &lt;/foreignobject&gt;&lt;/g&gt;
      &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I expect to see (which is what I see in FireFox) is this:</p>
  
  <p><img src="https://i.stack.imgur.com/4Vb2z.png" alt="The behavior of my example in FireFox"></p>
  
  <p>What I get in Chrome (15.0.874.121 on Fedora and on an Android Tablet) is this:</p>
  
  <p><img src="https://i.stack.imgur.com/9yPRN.png" alt="The behavior of my example in Chrome. The contents of the foreignObject are not in the right place."></p>
  
  <p>I have minimal control over my HTML content as I am using both a JavaScript Framework for rich apps and pre-existing widgets.</p>