How to enable animation on mobile

Store Design
, , , , , , , , , , ,
1

Hey ,I’ve added an animation for the collapse/expand answers in the collapsible content section using this code in my base.css:

.accordion details::details-content {
	display: block;
	margin-inline: 2rem;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.3s;
	transition-behavior: allow-discrete;
	transition-timing-function: ease-out;
}

.accordion details[open]::details-content {
	block-size: auto;
	block-size: calc-size(auto, size);
}
details .accordion__content {
    will-change: transform;
    transform: translateY(25px);
    transition: transform .5s ease;
}
details[open] .accordion__content{
   transform: translateY(0);
}

However, it’s not working on mobile devices, even though it works perfectly on all screen resolutions when tested via F12 on a desktop. How can I get it to work on actual mobile devices?

Here’s my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down to the collapsible content section)

Thanks! I’d really appreciate some feedback.
Tim

2

Hi @CreatorTim , thanks for reaching out.

Regarding your issue, I checked and would like to inform you that to improve compatibility, I recommend you add the !important attribute to your custom CSS rules to ensure they are properly applied. However, it’s important to note that CSS-based animations may not always be as smooth. In this case, I suggest you implement the animation using JavaScript, which allows for better control and performance. If needed, you can consider hiring a developer.

I hope my information is helpful to you.

Liz