how can i make it smooth on mobile

the pen https://codepen.io/-bloop-/pen/KKGGYpj now it's the backdrop-filter that's causing the problem.. How can I make it smooth??
12 Replies
Zoë
Zoë2y ago
While I'm here, I'd make a container around the button and use that for hover rather than the 3D button itself. This is because currently if where you hover then has the button move away if you move your cursor it un-hovers. You want to keep your initial hover area the same from beginning to end of the transition (it can be bigger, but should never be smaller) Also I assume that you're going to make the overlaid text more distinguishable and doesn't need to be mentioned
glutonium
glutonium2y ago
hmm..so i can make a container and then i can just do .container:hover > button instead right??
Zoë
Zoë2y ago
Yep Tested on iOS and it's smooth
glutonium
glutonium2y ago
and i think adding more drop blur would make the overlaied texts distinguishable no?? okii..tnx ❤️
Zoë
Zoë2y ago
Yeah that would help, and then make the background of the cube just a tiny bit darker
glutonium
glutonium2y ago
okeey.. i added a container and change the .button:hover to .container:hover > .button and increased the --blur to 10px
glutonium
glutonium2y ago
but u can still see it's laggy ;-;
glutonium
glutonium2y ago
u can see later in the video when I remove the backdrop it runs smoothly my phone is on 7%, could that be a reason? 😅
Zoë
Zoë2y ago
Hmm I assume it must be because of the backdrop filter. 3D is already intensive enough Possibly
glutonium
glutonium2y ago
sigh but i guess good thing it runs good for others xD anyways, really really tnx for helping out.. appreciate it ❤️
Zoë
Zoë2y ago
I'm not sure of a solution to this problem or if there is or isn't one
glutonium
glutonium2y ago
well, if it works good for others than it's good enough for me ahaha
Want results from more Discord servers?
Add your server