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>
      

Run codeHide result


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?

+3


source to share


3 answers


You get a scrollbar in Safari because:

  • height="100%"

    to object

    make it as tall as the body, and
  • Since <object>

    the default is used display: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.)

+3


source


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.

+6


source


I had the same problem with SVG using Safari on Windows. SVG had vertical and horizontal scrollbars.

However, I opened SVG files in a text editor and I had odd height and width attributes. I changed them to even numbers and solved the problem.

+1


source







All Articles