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
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
hmm..so i can make a container and then i can just do
.container:hover > button
instead right??
Yep
Tested on iOS and it's smooth
and i think adding more drop blur would make the overlaied texts distinguishable
no??
okii..tnx ❤️
Yeah that would help, and then make the background of the cube just a tiny bit darker
okeey..
i added a container and change the
.button:hover to
.container:hover > .button
and increased the --blur to 10px
but u can still see it's laggy ;-;
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? 😅
Hmm I assume it must be because of the backdrop filter. 3D is already intensive enough
Possibly
sigh
but i guess good thing it runs good for others xD
anyways, really really tnx for helping out.. appreciate it ❤️
I'm not sure of a solution to this problem or if there is or isn't one
well, if it works good for others than it's good enough for me ahaha