SVGs with IOS 11

Since upgrading to IOS 11 I have found that SVGs are not showing properly. Animated ones rotate around the box and some of the built in habpanel icons display with weird horizontal lines.

I found reference to this - not sure if I am near the mark. I tried adding this to the IMG tag inline but made no difference hoping someone can help @ysc is it something you need to be aware of?

yep, somehow I skipped your post :confused:

I kinda bummed my way into a BrowserStack account so I’ll have a look, can’t say when now though.

Any luck?

I’m not sure, I just tested with BrowserStack and don’t see anything wrong with the icons on iOS 11 at first sight.

Can you provide a way to reproduce the problem?

It’s animated svgs - the screenshot looks like static?

I was mainly looking for:

Are there animated builtin SVGs in HABPanel?
If it’s custom animated SVGs not rendering well because of a browser bug I probably can’t do much about it.

Ok no I’m using some custom ones but yes I also get the lines what can I do to provide some more info


@Andrew_Pawelski: Had similar problems with the animations on my floorplan SVG. It would help to know, if there´s a concrete css animation that doesn´t work for you?

1 Like

@Simson I think it is the icon itself im not good with SVG (or much else)
Heres the HTML

<img style="transform-box:fill-box;" id="weather-icon" ng-if="weathermap[itemValue('BOM_Precis_1')]==null"
						src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue('BOM_Precis_1').replace(' ','-')  | lowercase }}" />```

I have the same issue with chrome since a while. I’m using also the climacon icons. The animation seems to rotate around the wrong center.
It was working correctly before - so I assume the issue came with one of the chrome updates.

I added inside all climacon icon svg’s:


This solved the problem.

    class="climacon climacon_sun"
    viewBox="15 15 70 70"
    enable-background="new 15 15 70 70"
    <style type="text/css"><![CDATA[

            shape-rendering: geometricPrecision

        g, path, circle, rect{
            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
transform-box: fill-box;
            transform-origin: 50% 50%;

For me it’s definitely iOS update telated I pulled an old iOS 10 iPad out and the icons work fine