Safari scrolling and SVG
PROBLEM: Safari doesn't play ball and renders my SVG images with a scrollbar.
Improved version of the question: "How do I fill the given width and calculate the height based on the aspect ratio in Safari?" (thanks Phrogz)
Relevant code:
SVG file
viewBox="0 0 800 800"
(height or width not specified)
.objectwrapper {
max-width: 600px;
min-width: 150px;
margin-right: auto;
margin-left: auto;
}
.objectdiv {
max-width: 60%;
margin-right: auto;
margin-left: auto;
display: block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
<meta http-equiv="expires" content="0" />
</head>
<body>
<div class="objectwrapper">
<div class="objectdiv">
<object type="image/svg+xml" data="question0optimize1.svg" width="100%" height="100%">
</object>
</div>
</div>
</body>
</html>
In all other browsers I've tried, I get nice smooth zooming with window resize and ctrl + scaling. But Safari offers me smaller svg and scrollbars. What am I doing wrong?
source to share
You get a scrollbar in Safari because:
-
height="100%"
toobject
make it as tall as the body, and - Since
<object>
the default is useddisplay:inline
, you get an extra baseline (4px-6px) below the object. 100% + something above the window, and thus the scrollbar is displayed.
If you can clearly state that you want the final presentation to be specific, what the height should be for yours <object>
- I can help you work cross-browser.
Most likely you want to a) set display:block
in <object>
via CSS and / or b) remove height="100%"
from <object>
. (If you want to control the cross-browser height, set the height using CSS, not presentation attributes.)
You can see an annotated example of my failed test at
http://phrogz.net/svg/svg_via_object.html
and the fixed version at
http://phrogz.net/svg/svg_via_object.xhtml
(HTML4 and XHTML usage is not related to issue or fix.)
source to share
I had a similar issue with SVG in Safari5 on Windows. It showed scrollbars for no apparent reason.
Found a solution for me here: fooobar.com/questions/1355897 / ... :
I had to open SVG in a text editor and round up the svg-node height attribute from 79.999px to 80px. Somehow Safari5 doesn't like odd numbers in these fields.
source to share