search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5.05k stars 320 forks source link

Listbox, Accordion showing extra grey rect re-draw on state change in Chrome. #1259

Closed niktek closed 1 year ago

niktek commented 1 year ago

Current Behavior

Bingers found an issue on Chrome - more obvious in mobile sizes, but has been replicated at larger sizes. There is a grey rect drawing on state changes of items in the components.

https://user-images.githubusercontent.com/52020637/229342184-288ffcee-3a44-48b5-8a30-dea4ecd2a73f.mp4

Steps To Reproduce

No response

Anything else?

No response

endigo9740 commented 1 year ago

Not a bug, this is a focus selection on mobile: https://www.skeleton.dev/elements/core#mobile-focus

But we might be able to make show only on the element you select.

endigo9740 commented 1 year ago

@niktek I forgot to setup a PR so this was committed straight to the dev branch here: https://github.com/skeletonlabs/skeleton/commit/2cdf844537cfd852b492f5948541c51ce9d849b0

This was an odd one though - something about setting cursor-pointer -outline-offset-[3px] on the parent was causing this. I'm still not sure why. These styles were intended for the child items though, so I adjusted this. I also nixed an extra Label tag in the docs page that served no purpose.

As stated above though, the quick white flash should always be present on mobile as this is how touch devices handle the focus event. We just style it from Chrome's default blue to a more neutral white tone.