CODEWITHSUNDEEP
htmlioscsssvg
jezzipin
jezzipin

Reputation: 4254

SVG images rendering with huge space above and below IOS

I have produced a clickable SVG country map for a client site and I'm having some issues with the way in which it displays on IOS devices.

On Android or all browsers on a desktop, the image sits nicely (below on portrait and to the side on landscape) the options menu above it as shown in the image below.

Landscape: Landscape

Portrait:

Portrait

However, in IOS the SVG image seems to have a margin or padding of 100's of pixels meaning the user has to scroll really far down the page to see it. Is there some form of issue with the rendering of SVG images in IOS (it wouldn't surprise me if there was). If so, is there a workaround to get this to display properly like in all other browsers?

The settings I have on my SVG tag are as follows:

<svg viewBox="0 0 1056 1062" preserveAspectRatio="xMidYMid meet">

The page where this is occurring on IOS devices is:

http://lostworldadventures.axumdev.com/destinations/

Any help would be greatly appreciated.

N.B. The SVG is embedded inline into my HTML structure and is not rendered via an image tag

Upvotes: 0

Views: 1424

Answers (2)

dpow
dpow

Reputation: 1

You can also simply set height: auto; - it just wants to be told something, or else it falls back to a default value.

Upvotes: 0

jezzipin
jezzipin

Reputation: 4254

Okay so after a bit of reading around there seems to be a CSS hack known as the 1% hack that will solve this problem. Basically if you set the height of your SVG element to 1% using CSS the spacing will disappear and the SVG will render in the correct location.

So far I have tested this on all modern desktop and mobile browsers and it seems to be working great.

Upvotes: 6

Related Questions