SVGs with IOS 11

Apps & Services HABPanel
1

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?

2

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.

3

Any luck?

4

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

image
image.jpg755×948 124 KB

Can you provide a way to reproduce the problem?

5

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

6

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.

7

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

Thanks
Andrew

8

@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
9

@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 }}" />```
10

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:

transform-box:fill-box

This solved the problem.

<svg
    version="1.1"
    id="sun"
    class="climacon climacon_sun"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="15 15 70 70"
    enable-background="new 15 15 70 70"
    xml:space="preserve">
    <style type="text/css"><![CDATA[

        svg{
            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%;
...
11

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

Thanks
Andrew