Elements don't align perfectly on iOS on the picture-elements card

[arsaboo]

There is a slight discrepancy between how the elements appear on the desktop and on iOS (app as well as Safari).

All these elements appear perfectly on the desktop. Also, not all elements are affected. My config is available here.

[c727]

provide a test config so someone can check it, nobody will search through your whole config

[balloob]

Contribute your floorplan config to our gallery

[arsaboo]

Here's a test config that I created to document the issue:

title: Home Assistant
views:
  - icon: mdi:home-assistant
    id: home
    title: Home
    cards:
      - type: picture-elements
        # title: Main Level
        image: https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plan-600x450.jpg
        elements:
          - type: icon
            icon: mdi:cctv
            entity: camera.porch
            style:
              top: 92.5%
              left: 16%
              transform: rotate(235deg)
              --iron-icon-height: 30px
              --iron-icon-width: 30px
              --iron-icon-stroke-color: black
              --iron-icon-fill-color: rgba(50, 50, 50, .75)
          - type: icon
            icon: mdi:cctv
            entity: camera.patio
            style:
              top: 4.5%
              left: 16%
              transform: rotate(-60deg) scaleX(-1)
              --iron-icon-height: 30px
              --iron-icon-width: 30px
              --iron-icon-stroke-color: black
              --iron-icon-fill-color: rgba(50, 50, 50, .75)
          - type: icon
            icon: mdi:cctv
            entity: camera.backyard
            style:
              top: 5%
              left: 78%
              transform: rotate(60deg)
              --iron-icon-height: 30px
              --iron-icon-width: 30px
              --iron-icon-stroke-color: black
              --iron-icon-fill-color: rgba(50, 50, 50, .75)

Here's what I see on the desktop:

On mobile:

@balloob If you like this test config, I can add it as a demo card with more elements.

[balloob]

Please do! You can add the image file in gallery/public/images and refer to it as /images/XX

[arsaboo]

@balloob PR created https://github.com/home-assistant/home-assistant-polymer/pull/1496

[arsaboo]

@balloob indicated that the way it is coded right now, We just position the elements on top, don't resize with card. Thus, the image is shrunk, but not the icons (or any element drawn on top of it) and that may result in some discrepancy.