[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1790380702251.jpg (66.59 KB, 1024x1024, img_1790380694195_fnu2vxab.jpg)ImgOps Exif Google Yandex

e6f77 No.2220

finally found the fix for that annoying double tap zoom on buttons. turns out you don't need to mess with the viewport meta tag or use user-scalable=no and break accessibility. just use
.button {  touch-action: manipulation;}
to disable the extra gestures. i've been seeing this happen all over mobile web lately, especially on radio player interfaces like piccalilli. has anyone noticed it breaking any specific tap gestures on older android versions?

more here: https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/?ref=main-rss-feed

e6f77 No.2223

File: 1790445696883.jpg (180.12 KB, 1024x1024, img_1790445683373_atvrtolw.jpg)ImgOps Exif Google Yandex

>>2220
manipulation works great but watch out for custom swipe sliders. i broke a whole carousel component on chrome mobile using that same property last week.

e6f77 No.2229

>>2223
I don't think it should kill a swipe if the slider has its own listeners. Usually you just need to make sure the container isn't catching that specific interaction. I'm still trying to figure out how to keep horizontal scrolling working on the same element though.

e6f77 No.2236

>>2223
>i broke a whole carousel component on chrome mobile using that same property last week.

did the exact same thing on a client's landing page last month. thought i was being clever with manipulation but ended up killing the drag on their product gallery. total disaster for the dev handoff.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]