foreignObject display:block not working in chrome

css, google-chrome, html, svg

Solution

It appears, from my tests on Mac OS X, that Chrome doesn't support foreignObjects at least not with your required extension. I've tried your source, and also taken this example from mdn:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

<svg width="400px" height="300px" viewBox="0 0 400 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>This example uses the 'switch' element to provide a 
        fallback graphical representation of a paragraph, if 
        XHTML is not supported.</desc>
  <!-- The 'switch' element will process the first child element
       whose testing attributes evaluate to true.-->
  <switch>
    <!-- Process the embedded XHTML if the requiredExtensions attribute
         evaluates to true (i.e., the user agent supports XHTML
         embedded within SVG). -->
    <foreignObject width="100" height="50"
                   requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML content goes here -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Here is a paragraph that requires word wrap</p>
      </body>
    </foreignObject>
    <!-- Else, process the following alternate SVG.
         Note that there are no testing attributes on the 'text' element.
         If no testing attributes are provided, it is as if there
         were testing attributes and they evaluated to true.-->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Here is a paragraph that</tspan>
      <tspan x="10" y="20">requires word wrap!</tspan>
    </text>
  </switch>
</svg>

Now it's feasible that the MDN example has something that just doesn't work with Chrome, but for me I only get the text fallback rendering in Chrome Version 28.0.1500.71

Does your xhtml embed work in Chrome without the `display:none`?

Update

From my tests you can get the above example to work if you remove the `requiredExtensions` attribute. Obviously this is probably not a great idea, as it is my understanding that that attribute is there to make sure the content can be rendered properly by the user agent. However, if your target audience is only ever going to be browser-based you can probably make a good assumption that the UA will be able to support basic XHTML. Now as to whether certain UAs need that attribute to understand the embed content, that's a different story.

It is feasible that there is a correct namespace to use that both Firefox and Chrome will support, this answer could be interesting:

<textarea> inside <foreignObject> handles as expected in Chrome but not Firefox

However, it does seem that `foreignObjects` still cause issues around the web, so it could just be the browser vendors need to improve their support.

Update x2

So far I've got the following to work in both Firefox and Chrome now it would seem, strange thing this `foreignObject` ;)

<!DOCTYPE html>
<html>
<style>
svg {
  position: relative;
}
.tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 350px;
  padding: 5px;
  font-size: 11px;
  text-align: left;
  color: rgb(0, 0, 0);
  background: rgb(204, 204, 204);
  border: 2px solid rgb(153, 153, 153);
  border-radius: 5px;
  text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px; 
}
svg:hover .tooltip {
  display: block;
}
</style>
<body>
  <svg width="400px" height="300px" viewBox="0 0 400 300"
       xmlns="http://www.w3.org/2000/svg">
       <foreignObject id="foo" height="700" width="370" y="0" x="0">
           <span xmlns="http://www.w3.org/1999/xhtml" class="tooltip">
              <div><b>Comments</b></div>
           </span>
       </foreignObject>
  </svg>
</body>
</html>

Problem

Here's my part `html/svg` code ``` <foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" style="display: none;" id="foo" height="700" width="370" y="0" x="0"> <span xmlns="http://www.w3.org/1999/xhtml" class="tooltip"> <div><b>Comments</b></div> </span> </foreignObject> ``` What I am trying to do is display the `foreignObject` `onmouseover`. Here's the `onmouseover` code that changes the `style` attribute of the `foreignObject`. ``` $('#foo').css('display','block'); ``` And here's the `css` code for the `class tooltip`: ``` .tooltip { display: block; position: absolute; width: 350px; padding: 5px; font-size: 11px; text-align: left; color: rgb(0, 0, 0); background: rgb(204, 204, 204); border: 2px solid rgb(153, 153, 153); border-radius: 5px; text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px; margin-top: 1px; top: 0%; left: 0%; z-index: 1000; word-wrap: break-word; } ``` The whole code works perfectly in firefox but doesnt seem to work in chrome. I am working on Ubuntu 12.04 Chrome Version 20.0.1132.57. The `mouseover` changes the display of the `foreignObject`from `display: none;` to `display:block;` as intended but the text doesn't appear. EDIT http://jsfiddle.net/firecast/wNB8G/ Heres an example of my exact problem... which works fine on Firefox, but it doesn't work on chrome.

Original source