All geek questions in one place

ForeignObject display: block does not work in chrome

Here is my html/svg code part

 <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'm trying to do is show foreignObject onmouseover . Here's the onmouseover code that changes the style foreignObject attribute.

 $('#foo').css('display','block');

And here is the css code for 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; }

All code works fine in firefox, but doesn't seem to work in chrome. I am working on Ubuntu 12.04 Chrome Version 20.0.1132.57. mouseover changes the display of foreignObject from display: none; before display:block; as intended, but the text is not displayed.

EDIT

http://jsfiddle.net/firecast/wNB8G/

Here is an example of my exact problem ... which works fine on Firefox, but it doesn't work on chrome.

+4
source share
1 answer

My tests on Mac OS X show that Chrome does not support foreignObjects, at least not with your required extension. I tried your source and also took 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 (ie, 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 we can assume that there is something in the MDN example that just doesn’t work with Chrome, but for me I get text backup rendering in Chrome Version 28.0.1500.71

Is your embeddable xhtml embedded in Chrome without display:none ?

Update

From my tests, you can make the above example work if you remove the requiredExtensions attribute. Obviously, this is probably not a good idea, as I understand that this attribute exists to make sure that the content can be correctly processed by the user agent. However, if your target audience will only ever be browser-based, you can probably make a good guess that UA will be able to support basic XHTML. Now, about whether some UAs need this attribute to understand embeddable content for this attribute is another story.

It is possible that there is a proper namespace that will be used by both Firefox and Chrome, this answer might be interesting:

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

However, it seems that foreignObjects is still causing problems on the Internet, so browser developers need to improve their support.

Update x2

So far I have the following to work in both Firefox and Chrome, now it seems strange that this is 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>
+5
source

Source: https://habr.com/ru/post/1491793/

More articles: