before the 2024.6.0 update the tab worked correctly, i.e. the menu remained fixed on the page and made the movement as soon as the application was opened while now it remains still and stuck at the bottom of the page, does anyone know what happened next the update and why does this code no longer work?
type: custom:vertical-stack-in-card
cards:
- type: custom:decluttering-card
template: footer_sticky_menu
style: |
:host {
position: sticky !important;
bottom: 26px;
margin-bottom: 10px !important;
animation: 1.2s position ease-in-out;
}
@keyframes position {
0% { bottom: -80px; }
20% { bottom: -80px; }
70% { bottom: 26px; }
90% { bottom: 24px; }
100% { bottom: 26px; }
}
ha-card {
background: none;
border-radius: 26px !important;
}
:host:before {
content: '';
display: block;
position: absolute;
bottom: -26px;
left: -8px;
padding-right: 16px;
height: 130px;
width: 100%;
background: rgb(109, 173, 147)
pointer-events: none;
animation: 1.2s opacity ease-in-out;
}
@keyframes opacity {
0% { opacity: 0; }
20% { opacity: 0; }
100% { opacity: 1; }
}
### The sticky position don't work with Decluttering card
### This is why I have to add the CSS here