Safari Scrollbars & SVG

Question

PROBLEM: Safari is not playing ball and is rendering my SVG images with a scroll bar.

Improved version of Question: "How do I get an to fill a set width and have the height calculated based on the aspect ratio in Safari?" (thanks Phrogz)

Relevant code:

SVG File

 viewBox="0 0 800 800"

(no height or width 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 the other browsers I've tried I get a nice smooth scaling with window size changes and ctrl + zooming. But Safari offers me a smaller svg and scroll bars. What am I doing wrong?

Note that you have an XHTML namespace declared on your HTML element, but an HTML4 DOCTYPE. (And your content is clearly not XHTML, as the unclosed `meta` tags show.) — Phrogz, Apr 05 '12 at 14:54
@Phrogz thanks, I'll update the doctype. For a view of this problem in action, it will be here while I look at it (this site should in the future have other svgs if people want to see the eventual sourcecode) www.gamemorize.com — EnglishAdam, Apr 05 '12 at 15:01
W/H were put at 100% to ensure all the svg was rendered, but I've now deleted it and it makes no difference. I want the Object to fill 100% of its allocated CSS width and then stay in proportion to give height = width. Safari seems to allocate a fixed height. Note the height of scroll bar when the window shrinks/you zoom in. — EnglishAdam, Apr 05 '12 at 15:28
Actually I remember now why I had the w/h specified on the object... without the width specified my android phone was not showing any image. The height was just plain incorrect and only created problems — EnglishAdam, Apr 05 '12 at 15:56
As per my example XHTML, specifying the width and not the height is probably what you want to do. To work around Safari's issue (absent you actually asking a question and finding a better answer) I'd just add a bit of JavaScript that keeps the height the same as the width (given your 1:1 aspect ratio). — Phrogz, Apr 05 '12 at 15:58

score 6 · Answer 1 · edited May 23 '17 at 11:44

6

I had a similar problem with an SVG under Safari5 on Windows. It showed scrollbars for no obvious reasons.

Found a solution for me here: https://stackoverflow.com/a/8025526/2244646 :

I had to open the SVG in a texteditor and rounded the height-attribute of the svg-node from 79.999px to 80px. Somehow Safari5 doesnt like odd numbers in these fields.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 30 '14 at 12:37

rejas

155
1
4

Phrogz · Accepted Answer · 2013-12-16T21:07:21.993

3

You are getting a scrollbar in Safari because:

height="100%" on the object is making it as tall as the body, and
Because the <object> defaults to display:inline you get an additional baseline (4px-6px) below the object. 100% + anything is taller than the window, and thus a scrollbar shows.

If you can be clear about what you want the final presentation to be—specifically, what should the height be for your <object>—I can help you make it work cross-browser.

Most likely you want to a) set display:block on the <object> via CSS, and/or b) remove the height="100%" from the <object>. (If you want cross-browser height control, set the height via CSS, not presentational attributes.)

You can see an annotated example of my failing test at
http://phrogz.net/svg/svg_via_object.html
and the fixed version at
http://phrogz.net/svg/svg_via_object.xhtml

(The use of HTML4 versus XHTML is unrelated to the problem or fix.)

edited Dec 16 '13 at 21:07

answered Apr 05 '12 at 15:14

Phrogz

296,393
112
651
745

@Adam I've edited my answer with clear details as to what is going wrong. – Phrogz Apr 05 '12 at 15:26
Hey Phrogz, I used your ideas before and they've helped me but on your site notice how Safari gives you scrollbars if you zoom in. That's not happening with any other browser. – EnglishAdam Apr 05 '12 at 15:33
Re Height. i'd like it to keep the ratio it has to width in the object. Here in my live version it's 800px x 792px. – EnglishAdam Apr 05 '12 at 15:35
1

@AdamNarbutt Yes, that appears to be a flaw in Safari, not correctly recalculating height-based elements when the window is resized and there is no content in the page forcing a particular height. – Phrogz Apr 05 '12 at 15:44
You answered something similar a year ago; http://stackoverflow.com/questions/5643254/how-to-scale-svg-image-to-fill-browser-window - which helped me get great zooming in on the other browsers but not safari. What's happening in chrome? – EnglishAdam Apr 05 '12 at 15:44
@Adam Yes, but absolute positioning works fundamentally differently from flowed content of variable heights, and my answer does not attempt to match the aspect ratio for viewport. – Phrogz Apr 05 '12 at 15:47
Cheers and thanks for the help, sorry if I wasn't very clear at the start, shame it's a safari bug (easily resolved) – EnglishAdam Apr 05 '12 at 16:14
1

Both samples look identical in current (7.0) Safari (i.e. they've fixed the bug, it seems). – akauppi Dec 16 '13 at 19:27

score 1 · Answer 3 · answered Apr 19 '15 at 21:30

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

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

Safari Scrollbars & SVG

3 Answers3

Linked