Search code examples
csssvgandroid-browser

Change Object Size - Android < 4.3

I am testing my website with Android browser on Android 4.3, and the <object> clearly does not work like the other plattform. The SVG is being scaled, most likely to it's original size. For some reason it does not scale to the parent div.

The issue

As you see it's both the logo and some white objects below. These are supposed to be circles, but just shows a certain part of the object.

I refer to Can I Use which says <object> is not supported with Android 4.3 and older.

Example of an object:

<object data="#.svg" type="image/svg+xml">
     <img src="#.png" alt="Text">
</object>

As you see I have a fallback, but it clearly does not work. It rather takes the SVG-file... I have tried setting the object to the following:

height: 100% auto;

But that did not work.

I have also tried setting it to exact sizes with px, even though this is something I don't want. This was more like a test to see if it helped.

width: 50px
height: 50px;

Please see page if you have troubles understanding. But note that you must be using an Android Browser with Android 4.3 or older.

I am looking for a solution that makes the SVG or Object fit inside the div. Do you have any ideas?

Solution

  • The problem was solved by making all SVG non-interative, and using <img> combined with script fallbacks to png version:

    <img src="#.svg" onerror="this.src='#.png'">.