All the icons and names will tremor and shaking at the pages when toggle the button.

[aj-chan]

First of all, thanks to this project.

I found an issue when I toggle a button, all the icons and names will tremor and shaking at the pages. I want to debug out how can I fix it, OCD of me when i look at it and want to fix it. Finally I download the clean file from Aug release and Sep release having the same issue.

hope you can guide me to fix this. Thank you !!

1234.MP4

[matt8707]

I've noticed that too and suspected that the "ripple" effect is what's causing it... and it seems like it is. the shaking goes away if ripple isn't displayed, but I don't know how to fix it properly

#base.yaml
custom_fields:
  ripple: >
    [[[
      if (window.matchMedia('(max-width: 800px)').matches) {
          window.setTimeout(() => {
              let elt = this.shadowRoot;
              let ripple = elt.getElementById('ripple').shadowRoot.querySelector('div');
              ripple.style.display = 'none';
          }, 200)
      }
    ]]]

[aj-chan]

What you mean is add this code in base.yaml right? I tested it seems just the button I clicked itself will shake a little bit, others button seem to have reduced vibration or no vibration. May I ask what is the effect of your ripple effect?

[matt8707]

What you mean is add this code in base.yaml right?

yeah

I tested it seems just the button I clicked itself will shake a little bit, others button seem to have reduced vibration or no vibration.

It's completely gone for me, can you make a new video?

May I ask what is the effect of your ripple effect?

It's not mine, it's the effect when tapping a button
https://www.webcomponents.org/element/@polymer/paper-ripple

[aj-chan]

Sure. I made a new one. you can see that when I toggle the button ,the button 's icon itself will shaking

RPReplay_Final1669493268.-.Compressed.with.FlexClip.mp4

[matt8707]

that's because of the bounce animation. so this just happens on small screens and I don't know why

[matt8707]

will-change: transform fixes the shaking and also loader position
added new card_bounce that works with tilt

[aj-chan]

Thank you so much!

[aj-chan]

@matt8707 The iPhone and Mac side shaking issue has already been fixed. But I just found out that the problem with iPad Pro 12.9 is still there. Do you know what the problem is? After deleting the code of card_bounce the issue gone away but without the card_bounce animation effect.

    card_bounce: |
      [[[
        // add animation
        if (this.getElementsByTagName("style").length === 0) {

            // phone condition
            let mq = window.matchMedia('(max-width: 800px)').matches;

            let style = document.createElement('style');

            style.innerHTML = `
                @keyframes card_bounce {
                    0%   { transform: scale(1); }
                    10%  { transform: scale(${ mq ? '0.92' : '0.94' }); }
                    25%  { transform: scale(1); }
                    30%  { transform: scale(${ mq ? '0.96' : '0.98' }); }
                    100% { transform: scale(1); }
                }
            `;

            this.appendChild(style);
        }

        // duration
        let duration = 800;

        // animate
        this.style.animation = `card_bounce ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`;

        // reset
        window.setTimeout(() => { this.style.animation = "none"; }, duration + 100)
      ]]]

IMG_3336.-.mp4

will-change: transform fixes the shaking and also loader position
added new card_bounce that works with tilt

[matt8707]

this is not the same issue, notice how the text also moves
I don't own an ipad so can't confirm, but make sure it's not any of your changes

[aj-chan]

@matt8707

I found out why. It is about "effect: coverflow" , also the orange point out the space of the boundary to the name. it is not not equal after adding the"effect: coverflow" . (all my yaml was replaced with sep release file.yaml), but seems only on iPad.

          - type: custom:swipe-card
            start_card: 1
            reset_after: 15
            parameters:
              effect: coverflow

[aj-chan]

seems the right one move to the right, middle one just moves bounce from the middle. the left one bounce to left
https://user-images.githubusercontent.com/55744541/204993762-532d6068-6aee-477b-ac6f-fb3e0d6bf6de.mp4

[aj-chan]

Tilt !! It should be this effect that offsets the text of the Tilt effect.