Unexpected position of ::before element while animating.
I have a drop down menu that is being shown and hidden using transition. I have custom css for radio buttons. I have created checked state for radio button using ::before. Even though i positioned the before element center to the radio input, it is being shown somewhere else during transition and I have no clue. Please find the attachments for more detail. Help ples 😦
site: https://reetro-coder.github.io/moco/
8 Replies
Can you please put all your code in a codepen ? That file extension isn’t working for me.
How far away is the before element after transition? And have you tried using
transform: scale instead of scale on its own? Sometimes that solves my issue for whatever reason
And what is the relationship bw the drop-down menu and the radio button?yea i can try to share a code pen link
there is no relation between drop down and radio button
the whole drop down just becomes...display block when the button is clicked
i just put some animation on the dropdown so that it feels like a drop down
recreating the same on codepen was kind of hard. Instead I hosted my site here:
https://reetro-coder.github.io/moco/
So the relationship is when you click the button the drop-down is displayed.
yes
you can visualize the problem in the site. In firefox there is no problem. But i dont know why...there is problem in chrome and edge
I’ll take a look on laptop later. I’m not even seeing a radio button on my phone
yeah that is another issure that i have to figure out....it works when i use inspect -> mobile view...but when i use actual mobile phone...i dont even see the drop down...so many bugs man 😦
I do not see a radio button anywhere in the code
can you give ma hint where to look??