Time Text in Lovelace card showing distortion

Configuration Frontend
1

Hello All. I have a weird issue. im using a picture-element card in Lovelace and a simple text-label for the time I found elsewhere on the forum. it works except the minutes keep getting visually distorted. it does this in the app and on a web browser. sometimes its one digit, sometimes its both. it happens every minute AFTER the time refreshes. not the first minute or a manual refresh. ill attach a photo so you can see. ive tried setting a streaming video, changing font, changing size, etc but no dice. the only lead I have is im using a huge font size and I noticed if I go below 30px it doesnt seem to glitch out. problem is this is for a clock and that defeats the purpose. im using 120px right now as my preference. any ideas? thank you!

entity: sensor.local_time_12h
style:
  top: 25%
  left: 50%
  font-weight: bold
  font-size: 120px
  color: rgb(255,255,255)

Screen Shot 2022-07-18 at 12.35.17 PM

2

Post a more detailed code snippet for someone who may want to reproduce the bug.
At least the picture-elements card with this element only.
Check if this small snippet can reproduce the bug.

Also, a code for the sensor.

3

sure, here you go.

type: picture-elements
theme: blackened
elements:

  • type: state-label
    entity: sensor.local_time_12h
    style:
    top: 22%
    left: 50%
    font-weight: bold
    font-size: 130px
    color: rgb(255,255,255)
  • type: state-label
    entity: sensor.local_time_ampm
    style:
    top: 14%
    left: 81%
    font-weight: regular
    font-size: 35px
    color: white
  • type: state-label
    entity: sensor.local_time_date
    style:
    top: 4%
    left: 50%
    font-weight: bold
    font-size: 24px
    color: white
    image: /local/images/transparent-800x1600.png

sensors.yaml
local_time_ampm:
value_template: >-
{% set dummy = states(“sensor.timea”) %}
{{ as_timestamp(now()) | timestamp_custom(’%p’) }}
local_time_12h:
value_template: >-
{% set dummy = states(“sensor.timec”) %}
{{ as_timestamp(now()) | timestamp_custom(’%-I:%M’) }}
local_time_date:
value_template: >-
{% set dummy = states(“sensor.timec”) %}
{{ as_timestamp(now()) | timestamp_custom(’%A, %B %d’) }}

The weird thing is after paying more attention its doing it on all kinds of text. size seems to make it happen more frequent but I saw it occur on size 12 as well as 30 and higher. completely different variable too, the size 12 was a netatmo sensor showing temperature. I have to be doing something wrong because according to my testing ALL text in multiple cards, multiple dashboards does this eventually if left up long enough. it won’t fix itself either, you have to manually refresh the app (I use that mostly). the website is similar too. im perplexed though. images do not do that as I have several video cams and icons and they are just fine. only seems to be changing text. nothing with static text. works fine. thanks!

4

You should use a formatting for the code.

5

I don’t understand what you mean. is that like a template or function? thanks!

6

Hi did you solve this?
Ildar_Gabdullin means your code should be pasted with proper yaml formatting. make sure to wrap your code in backticks using the ` key on your keyboard.

7

here is my code with the same problem. When the time changes only part of the figures change.
All advice gratefully received.

type: picture-elements
image: /local/alarmclock.png
tap_action:
  action: input_boolean.wakestatus_1
hold_action:
  action: none
elements:
  - type: state-label
    entity: sensor.time
    style:
      top: 20%
      left: 50%
      font-size: 10vw
      color: white
  - type: state-label
    entity: sensor.friendlydate
    style:
      top: 70%
      left: 50%
      font-size: 30px
      color: white

sensor:
  - platform: time_date
    display_options:
    - 'time'
8

I do not observe any glitches:
image
image
image

Chrome, Win10x64.

sensor:
  - platform: time_date
    display_options:
    - 'time'

type: picture-elements
image: /local/images/blue.jpg
tap_action:
  action: input_boolean.test_boolean
hold_action:
  action: none
elements:
  - type: state-label
    entity: sensor.time
    style:
      top: 20%
      left: 50%
      font-size: 5vw
      color: white
9

Thanks Ildar that’s interesting - it looks like a Safari issue…