{"id":344950,"date":"2021-07-21T14:08:17","date_gmt":"2021-07-21T21:08:17","guid":{"rendered":"https:\/\/css-tricks.com\/?p=344950"},"modified":"2021-07-24T11:58:23","modified_gmt":"2021-07-24T18:58:23","slug":"yet-another-mobile-context-menu-with-no-indication-it-can-scroll","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/yet-another-mobile-context-menu-with-no-indication-it-can-scroll\/","title":{"rendered":"Yet Another Mobile Context Menu With No Indication it Can Scroll"},"content":{"rendered":"\n

Remember Tyler Hall’s personal story<\/a> of a UX moment where the popup sharing context menu on iOS had no visible indication that the content inside was scrollable? The thing his mom wanted to do seemed impossible because it was out of view. iOS isn’t alone here \u2014 Terence Eden documents<\/a> essentially the same problem on Android:<\/p>\n\n\n\n

I tried sharing a website using Google Chrome for Android. I hit the share button, and a panel popped-up from the bottom of the screen.

Hmmm. It didn’t have the share destination that I wanted. It was early in the morning – when I’m not at my cognitive best – and I was stumped. There is nothing on this screen – other than the icons – to tell me how I can interact with it. There’s no scrollbar, no handle, no “more” icon, nothing.<\/p><\/blockquote>\n\n\n\n

I would think even just fairly subtle “scroll shadows” would go a long way in both cases, but some serious user testing should be in order here. <\/p>\n\n\n\n\n\n\n\n

\n
\n
\"Android<\/figure>\n<\/div>\n\n\n\n
\n
\"iOS<\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Remember Tyler Hall’s personal story of a UX moment where the popup sharing context menu on iOS had no visible indication that the content inside was scrollable? The thing his mom wanted to do seemed impossible because it was out of view. iOS isn’t alone here \u2014 Terence Eden documents essentially the same problem on […]<\/p>\n","protected":false},"author":3,"featured_media":344952,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/sharesheet-1.png?fit=1242%2C2208&ssl=1","jetpack-related-posts":[{"id":295666,"url":"https:\/\/css-tricks.com\/ux-considerations-for-web-sharing\/","url_meta":{"origin":344950,"position":0},"title":"UX Considerations for Web Sharing","date":"September 20, 2019","format":false,"excerpt":"From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these buttons aren\u2019t needed. All mobile browsers \u2014 Firefox, Edge, Safari, Chrome, Opera Mini, UC Browser, Samsung Internet \u2014 make it easy to share content\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/sharing-icons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288685,"url":"https:\/\/css-tricks.com\/how-to-use-the-web-share-api\/","url_meta":{"origin":344950,"position":1},"title":"How to Use the Web Share API","date":"June 6, 2019","format":false,"excerpt":"The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content \u2014 say a link\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/web-share-api.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287475,"url":"https:\/\/css-tricks.com\/everything-you-ever-wanted-to-know-about-inputmode\/","url_meta":{"origin":344950,"position":2},"title":"Everything You Ever Wanted to Know About inputmode","date":"May 17, 2019","format":false,"excerpt":"The inputmode global attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display when a user has selected any input or textarea element.