Div inside SVG foreignObject loses its position and not visible in MAC Chrome browser and mobile view.
I tried to run this HTML5 SVG code in MAC chrome (54.0.2840.98 (64-bit)); but the DIV inside the become invisible (or seems to be losing its position/jumping out from the SVG) when content in the DIV Overflows or scrollbar comes. However, it works perfectly in MAC Firefox and all browsers in Windows (except Mobile views).
Is it an issue regarding
viewport metadata?
div inside ForeignObject?
MAC chrome bug?
CSS?
How can we solve this?. Your help is much appreciated.
What I tried,
Test HTML file
https://www.dropbox.com/s/ygz6x0mu6sfhkes/testsvg.html?dl=0
Found a similar bug in Webkit forum
https://bugs.webkit.org/show_bug.cgi?id=23113
Head
<meta content="width=device-width, initial-scale=1" name="viewport" />
Body
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1200">
<rect class="cls-a" x="568.13" y="103.99" width="409.76" height="350.53" />
<rect class="cls-b" x="602.86" y="159.55" width="340.31" height="350.28" rx="13.35" ry="13.35"/>
<foreignObject class="chat-outer" x="602.86" y="159.55" width="340.31" height="300.28" rx="13.35" ry="13.35">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="list-wrap" >
<div>
<div class="list-content">
<div class="list-row">
<p >Hi</p>
</div>
<div class="list-row">
<p >Hello</p>
</div>
<div class="list-row">
<p >how are you?</p>
</div>
</div>
</div>
</div>
</div>
</foreignObject>
</svg>
CSS
.list-content {
height: 280px;
padding: 0px 25px;
background: #ffccbc;
overflow: hidden;
overflow-y: auto;
}
We've just had a similar issue and managed to fix it by setting the overflow to visible on the foreignObject.
Related
I'll admit right off the bat i'm very new to SVG graphics in html. That said i'm attempting to upgrade my site images to SVG's where appropriate.
I started with this code:
<svg class="logo">
<image
class="logo"
xlink:href="https://cdn.badmonsterarts.com/main_logo.svg"
src="https://cdn.badmonsterarts.com/main_logo.png"
/>
</svg>
Which works fine in chrome and firefox, however when tested on Safari(Both mobile and desktop) it rendered as a blank rectangle. That said I did some research and tried some stack overflow answers which brings us to my current code:
<svg
class="logo"
viewBox="0 0 256 75"
xmlns="http://www.w3.org/2000/svg"
role="img"
>
<image
class="logo"
xlink:href="https://cdn.badmonsterarts.com/main_logo.svg"
src="https://cdn.badmonsterarts.com/main_logo.png"
/>
</svg>
The problem however is this still works in chrome and firefox, but I still can't get it to render in Safari.
Here's the CSS i'm using to size it, logo wrapper is a div surrounding the SVG as a warpper:
.logo-wrapper {
width: 256px;
height: 75px;
overflow: hidden;
.logo {
width: auto;
height: 100%;
}
}
I've also tried using <use ... /> instead of <image ... /> with no luck either, when I used <use ... /> it didn't even render in chrome. I'm hoping one of your brilliant minds can lead me in the right direction and save my sanity.
If it helps anyone debug this, there's a link to the site that the SVG is being used on(The logo in the top left on the nav bar).
https://www.badmonsterarts.com/
Thanks!
If you set the image width and height to 100% of the viewBox it ought to work (I took the viewBox values from the external SVG).
By only setting the viewBox you make the SVG responsive – why you can leave out the logo class
.logo-wrapper {
width: 256px;
height: 75px;
overflow: hidden;
}
<div class="logo-wrapper">
<svg viewBox="0 0 679 200">
<image width="100%" height="100%" xlink:href="https://cdn.badmonsterarts.com/main_logo.svg" />
</svg>
</div>
The goal is to make the HTML embedded inside a SVG element occupy the full width and height of the root SVG element, which itself is embedded inside a HTML document.
However, as you can see from the Codepen, the width attribute seems to work, but the height attribute fails to affect the root SVG element. The embedded div is not 2688 pixels tall as a result.
Ultimately, the SVG root element and its contents should be 1242x2688.
What's wrong?
https://codepen.io/anon/pen/zyJZbr
<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
Why is this height wrong?
</div>
</foreignObject>
</svg>
In Firefox, your example works.
On a sidenote, this question offers a solution by absolutely positioning the div inside the svg element :
#testBox {
position:absolute;
}
<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
This is 100% height.
</div>
</foreignObject>
</svg>
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I am having issues with an SVG clipping mask that's applied to an image. This works correctly in Firefox, but in Chrome and IE the clipping mask works in reverse (not had a chance to try other browsers yet).
Here's what I mean-
Firefox
Chrome/IE
<svg height="0" width="0" >
<defs>
<clipPath id="clipPath" stroke="white" stroke-width="10">
<path d="M252.294,0.26l-203.586,0c0,0-47.43,1.586-48.207,38.876c0.777,37.29,48.207,38.877,48.207,38.877h203.586
c0,0,47.43-1.587,48.207-38.877C299.724,1.847,252.294,0.26,252.294,0.26z"/>
</clipPath>
</defs>
<div id='board_img_1' class='board_imgs'>
<img src="./images/board1.png" style=" clip-path: url(#clipPath);
width: 100%;
height: 100%;"></div>
<div id='board_img_2' class='board_imgs'>
<img src="./images/board2.png" style=" clip-path: url(#clipPath);
width: 100%;
height: 100%;"></div>
</svg>
Here's my HTML. I'm not sure where to begin even trying to fix this and it seems like a fairly specific issue.
As Michael Mullany suggested, try changing img to image and changing your div tags.
http://www.w3schools.com/svg/svg_reference.asp
Here is a page that might help with regards to what you can/can not use.
There is also some examples of how to use SVG here:
http://www.w3schools.com/svg/svg_examples.asp
Lastly, check out this link for browser support for SVG and its various uses:
http://caniuse.com/#cats=SVG
I need to have my svg within div's as follows:
<div style="height:100px; width: 300px; border:1px solid red;" >
<div style="width: 100%; height: 100%; display: table;">
<div style="display:table-row; height:100%">
<div style="position: relative; vertical-align: middle; height:100%;">
<div style="vertical-align: middle; position: relative; margin: 0px auto; height:100%;">
<svg viewBox="0 0 485 255" id="damageCanvas" style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" fill="rgba(124,240,10,0.5)" height="100%" width="100%">
<g transform="translate(1,1)">
<rect stroke="black" stroke-width="1.5" width="99.5%" height="99.5%" fill-opacity="0" style="padding: 2px 2px 2px 2px"></rect>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
The problem is that the following SVG is rendered in different browsers in different ways.
Chrome:
Firefox:
IE 9:
I want the image to be scaled as in chrome version. How can i achieve this?
Fiddle: http://jsfiddle.net/Sq5bL/5/
You can save your SVG in a file and use it as a resource, via <img> or <embed>. I've used both and it scales nicely. <img> stops you from accessing the SVG, so if you need access to the SVG then I would recommend using <embed>.
In my case I did:
<embed id="gaugeSpeed" class="gaugeImage" width="200" height="200" type="image/svg+xml" src="assets/gauges/speed.svg">
and it scaled it nicely. Same for when I use SVG with the <img> tag. I've tested on Transformer Prime and Nexus 7 running both ICS and Jellybean, works fine.
Should work fine with your parent div as well, as it's just treated like a normal img or object.
Well, since you would like to keep your SVG... your problem is caused by the use of the
display: table
on the second div. If you change that to a table-cell or remove it then your problem is resolved.
This is a JSFiddle that shows it working with table-cell