SVG is a scrollable object in Safari - firefox

Here's a page with an SVG graphic I designed.
http://s383324595.onlinehome.us/HTML5-1
It looks and acts properly in Chrome (and Canary and Chromium), but the graphic itself is a tiny, square in Safari 5.1, and requires scrolling to see the whole image. What's wrong?
Moreover, it looks like the graphic is on the offset on the X axis in Firefox. How can I fix that?

Remove the width and height attributes on the root <svg> element, then tweak the CSS for the embed element so that it gets the width and height you want.

Safari don't understand float numbers as width and height on root SVG element. Make sure they are integers (round them up).

Related

With Three.js, why is the webgl canvas's height and width double the css style height and width for the same element?

I noticed while working with three.js that the webgl canvas element's height and width is getting set to double the css style height and width that's set in the window resize function. Wondering why this is because I'm running into some bugs while using some custom build shaders with Effects Composer.
This probably has to do with the device-pixel-ratio, which i think is 2 on retina-screens. Here is the code that sets the values for the canvas-element: https://github.com/mrdoob/three.js/blob/dev/src/renderers/WebGLRenderer.js#L353-L379
The default-value for the pixel-ratio is 1, and it should probably stay that way if you are doing pixel-shader heavy operations in full-screen. Search through your code for setPixelRatio() and remove it.

SVG isn't always sharp

The SVG logo on this site doesn't look sharp on every zoom level. I read once, that SVG is just sharp on a multiple of its original size. But when I rightclick on the graphic and display it alone (without an img tag around it), it looks sharp on every possible zoom. There is no width or height given to the image.
It appears that Firefox renders the SVG to an image when referenced via an <img> tag. Use an <object> tag
I believe the issue is in Firefox.
Try to set the image width to 100% and height to the actual height of the SVG and this will solve the issue.
For Instance.
img{width:100%;
height:xxpx; /* Where 'xx' is the value of the image height in pixels */
}
Hope this Helps.

How to find pixel height of a div with a consistent result between FF and Chrome

Back story: I have an SVG canvas with some polylines on it. I also have some HTML <span> and <textarea> elements that need to be positioned precisely in relation to those polylines.
I started by putting the HTML elements in the SVG in <foreignElement> tags, but I had a problem there because IE doesn't see them at all and Firefox doesn't see the <textarea>s. So I took them out of the SVG and now every browser sees them.
So far so good. Now the only way I know to make sure they position correctly with the polylines is to give both the HTML elements and the SVG canvas absolute positions with CSS.
Here's my problem. Above all these elements is a header div. I want the whole SVG business to sit at a reasonable distance below the header. Say 15px. But since the SVG is absolutely positioned, I need to know the height of that header div to get the SVG and related HTML elements into the right place.
I've tried jQuery's .height() method and some related methods. The problem with all of them is that Firefox and Chrome give two different results. I know this doesn't reflect a real pixel height difference between the two, because I can see visually that the header is slightly taller in FF, yet FF gives a smaller height reading.
How can I get a browser-consistent height reading for my header div? Or at least one that I can use to absolutely position other elements at the same distance below it in every browser.
You could try with this function
function getHeight() {
return Math.min(
Math.min(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.min(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.min(document.body.clientHeight, document.documentElement.clientHeight)
);
}
or simply with document.documentElement.clientHeight, which usually does the trick for me in all the browsers I use for testing (Chrome, Firefox, Safari and Opera)
[edit] The function above returns the width and height of the body, in order to use it for any div, use this one
function getHeight(div) {
return Math.min(div.scrollHeight, div.offsetHeight, div.clientHeight);
}
You can use it like this
var myDiv = document.getElementById('myDivId');
console.log('the height is ' + getHeight(myDiv));
[edit2]Keep in mind that the divs might actually have a different size depending on the browser.
Let's say this is google chrome and the green bar at top is the navigation bar, with a height of 75px. You have it at 100%, filling up your screen, who has 1000px height, and you place an 100 pixels div to the top and also stick an 100px div to the bottom of the screen (with blue). The purple div between them will have an 725px height.
And this below is firefox. It's placed on the same 1000px screen, also at 100%, but its navigation bar has 100px height. With the same 100px blue divs to the top and the bottom, the purple div will have a height of 700px here, different from chrome.
Of course, this is a very, very simple example and I doubt this is your case. But you might have a similar problem with div placements and it's something you should try to check.

Div width clipped - only in Firefox for Windows

I am having a problem occurring only in Firefox for Windows (although I admit I am using Browserlab to test, and crossing my fingers it is accurate!)
The test page is here: http://carolineelisa.com/rkl/index2.html
Currently in FF3-4 the grey background to the footer is not the full width of the page. Sometimes it is the width of the main left hand column above it, but sometimes wider...
I have tried giving it a width of 100%, using clear fixes, removing floats from its child divs and even the columns above it, removing scripts from the page, all with no luck.
Any ideas on how to fix this? Thanks in advance.
You should give the footer element a min-width of 930px (which is your main contents width) so that it does not inherit from the body.
The problem you describe only happens (in my windows and FF) when the page is re-sized and the horizontal scrollbar appears.

Scrolling & zooming SVG Viewer on Windows?

We need to view some very large (7200+ pixels) SVGs. Every SVG viewer I've found, including modern web browsers, does not allow us to view the entire image. There aren't any scrollbars, and we do not have the option to zoom.
Is an open source / free application available that could help with viewing the entire SVG image? Thanks!
If you really do mean SVG, Inkscape should work.
You need to add viewBox attribute to the <svg> element and wievers will scale the image to the available viewport.
<svg viewBox='0 0 7200 7200' ... >
You may want to try Opera SVG Viewer to preview multiple svg files at once.
If you use a custom css browser extension such as Stylus, you can set up a CSS style for overflow on the root element, which should be <svg>:
:root {
overflow:auto !important;
}
This is pretty harmless for any html page but you can have it only apply to .svg urls via the url regex filter:
^.*[.]svg$
Now with this in place, opening an svg in a new tab will apply the style and allow you to scroll around. Zooming in and out should automatically adjust scrollbars.

Resources