OH3 Widget card-expandable flashing background color?

[Rolli (Roland Mayr)]

Im on OH 3.4 and have an issue with the backgroung color of an expandable card.

i followed this post

In the widget editor the code works as expected but in the browser not.
Here is my widget code.

uid: muell_neu
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Dec 27, 2022, 8:55:20 AM
component: f7-card
config:

  backdrop: true
  border-radius: var(--f7-card-expandable-border-radius)
  expandable: true
  style:
    --f7-card-expandable-box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.5)
    --f7-card-expandable-margin-horizontal: 5px
    --f7-card-expandable-margin-vertical: 7px
    --f7-card-expandable-tablet-border-radius: 0px
    --moz-user-select: none
    --ms-user-select: none
    --webkit-user-select: none
    --blink-color1: white
    --blink-color2: '=(items.Muellkalender_Ergebnistitel1.state === "Papier") ?  "linear-gradient(to left,#FFFFFF 0%, #EE2C2C 100%)" : (items.Muellkalender_Ergebnistitel1.state) === "Restmuell" ? "linear-gradient(to left,#FFFFFF 0%, #797979 100%)" : (items.Muellkalender_Ergebnistitel1.state) === "GelberSack" ? "linear-gradient(to left,#FFFFFF 0%, #FFD700 100%)" : (items.Muellkalender_Ergebnistitel1.state) === "BaierBio" ? "linear-gradient(to left,#FFFFFF 0%,#CD661D 100%)" : "white"'
    height: 54px
    width: auto
  stylesheet: >
    .myDIV {
      animation: mymove 1s infinite;
    } @keyframes mymove {
      from {background: var(--blink-color1);}
      to {background: var(--blink-color2);}
    } .myDIVnormal {
      background: var(--blink-color2)
    }
  class:
    - card-expandable-animate-width
  swipeToClose: true
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 100%
          
        class: '=(dayjs(items.Muellkalender_Ergebnisstart1.state).diff(dayjs().startOf("day"), "days")) == 1 ? "myDIV" : "myDIVnormal" '
      slots:
        default:
          - component: oh-button
            config:
              class:
                - card-opened-fade-in
                - cell-close-button
                - card-close
              color: black
              iconF7: xmark_circle
              iconSize: 30px
              style:
                padding-bottom: 35px
                padding-top: 14px
                position: absolute
                right: 0
                top: 0
                z-index: 999
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                height: 200px
                margin: 0px
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - display-flex
                      - justify-content-space-between
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - display-flex
                          width: "10"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: trash
                                size: 25px
                      - component: f7-col
                        config:
                          class:
                            - display-flex
                          width: "40"
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items.Muellkalender_Ergebnistitel1.state
                      - component: f7-col
                        config:
                          class:
                            - display-flex
                          width: "50"
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items.Muellkalender_Ergebnisstart1.displayState

In the widget editor i get this result

in the browser i get this result

any help appreciated

[JustinG]

I cannot replicate this error in my 3.4 system. I don’t have your items, so I have to just reduce the item-based expressions to simple values:

    --blink-color2: linear-gradient(to left,#FFFFFF 0%,#EE2C2C 100%)

and

        class: myDIV

but when I do that, I get the same result in the widget editor and on the page.

The widget editor should always show the same as the page under the same conditions, so this could be an issue that needs to be filed on github, but before you do that, you need to make 100% sure that the starting conditions in the two scenarios are, in fact, the same.

Your class expressions and your blink color expression rely on different items, and I don’t know the relationship between these items, but from what I can see there are certainly situations where the combination of those two items can result in the card “blinking” white. What happens if you change the final white in the blink color expression to something more distinct, such as fuchsia? Does the page version of the widget blink this color instead?

What happens if you change the

[Rolli (Roland Mayr)]

I changed the colors and the class to make it more readable

    --blink-color1: red
    --blink-color2: linear-gradient(to left,#FFFFFF 0%,#FFD700 100%)

class: myDIV

In the widget editor it is flashing red and yellow as desired

in the browser the content is flashing red not the background

[Rolli (Roland Mayr)]

This is crazy, i just rebuilt the whole widget and tested it on a test site, not the overview page and it worked.
I also tested the old widget on the test site, and it worked.
Deleted the old widget from the overview page and insert again, and it worked.

moved it to the previous position and it refused its job.

see video

[JustinG]

Do you have multiple widgets on the same page

@Rolli

moved it to the previous position and it refused its job.

Ok, that’s weird…

Looks like this is something that should be filed on the GitHub repo. Certainly the position of the widget in a container shouldn’t impact it’s css styling like that.

[Rolli (Roland Mayr)]

All the widgets on my overview page are only once on the page.

If i move the widget on a position where it doesn`t work and i insert the same widget to the page again, both start working.

see Video

I guess i have to clean up my system, its online since 2018 and always updated to the latset versions, there might be some orphaned stuff around.

[Rolli (Roland Mayr)]

Just to close this Issue,

I made a complete new setup of my system, and it’s working now without any issues.
There was no way to figure out what caused this weird behaviour.

Thanks for your time