Session notes: scroll bleed, iOS web, alt text flow, captioned gallery flow, unpermalinks, editor AYS

Scroll bleed when Notifications loads more – Macnchrome

When Notifications loads the next batch infinite scroll results, scrolling passes through to the page beneath. Once the new batch of notifications load in, scrolling returns to Notifications. This makes for awkward scrolling that stomps the vscroll context of the underlying page.

https://github.com/Automattic/wp-calypso/issues/5697
 

Screen Shot 2016-10-25 at 2.15.16 PM.pngiOS Scroll bleed

With Calypso on iOS, if you don’t see the problem at first, keep going. Tap around. As state piles up, weird things start happening. #tap-bleed, #scroll-bleed, and #cursor-bleed become more frequent, as do things like bar detachment.

Even with fresh state, the filter header jitters while scrolling notifications. This jitter has existed on iOS for the life of Calypso.

#scroll-bleed is pervasive in Calypso and is featured in Notifications.

https://test.wordpress.com/tag/scroll-bleed/

https://test.wordpress.com/tag/cursor-bleed/

https://github.com/Automattic/wp-calypso/issues/8173#issuecomment-256155668

Alt text flow

The lack of a modal means those who drag-and-drop images directly into the editor can’t add alt text to dropped images without rummaging in the insert image modal (accessed via a + plus button).

Further, without access to the image details modal from the editor’s inline image toolbar, adding alt to images on old posts requires scrolling through the image modal looking for the right image amidst months of thumbnails. Unlike in core WP, there is no “Images uploaded to this post” filter. This is supremely frustrating flow if you trying to be good about alt text.

https://test.wordpress.com/2016/09/30/session-notes-drag-and-drop-image-flow-trackers-editor-masterbar-macnchrome-iphone-7/

https://github.com/Automattic/wp-calypso/issues/307#issuecomment-256178884

Captioned gallery flow

With a recent fix to gallery previews, this post stands at 3/4 fixed.

Permalink changed date

I noticed that this old tweet of mine links to https://hypubnemata.me/2016/10/03/growth-mindset-and-structural-ideology/

That 404s. The link is now https://hypubnemata.me/2016/10/05/growth-mindset-and-structural-ideology/. The day changed from 03 to 05. I don’t know how I managed this.

Untrustable editor restore prompt

I haven’t visited this post in 3 years. I open it and get a restore unsaved changes prompt. What am I restoring? I just want to peek the post right now, not edit it, so I click “Don’t restore”. I’ll postpone dealing with it until next time I venture to this post. After reading, I click the editor’s back button to return to my posts search and receive an unsaved changes AYS (Are You Sure). That’s an interruption on the way in and one on the way out. Unless I restore unseen changes I will be twice interrupted on every visit. So far, this happens with every post in this search https://wordpress.com/posts/my?s=knolling.

I often search my posts wanting to peek in a post, maybe lift some text, and leave. I see restore prompts often in this flow.

AYS Styles

Close the tab/window.

Browser back button

Layouts look like loading placeholders

For a moment, I thought resources were still loading.

You followed Site Title – iOS app

After creating a new site, I receive notifications with “Site Title”.

Searching themes – iOS web

Have to type right on the icon to search. I often accidentally trigger the dropdown when I want to search.

Search is not autofocused, requiring another tap.

I can have both filter and search open.

When I start typing, scroll jumps.

Scroll bleed

Scroll bleed usually disappears once you lift your finger. This scroll bleed persisted.

Account login overlays notifications

Tap me and then notifications.

#accessibility, #ays, #captioned-gallery-flow, #captions, #chrome, #desktop, #editor, #galleries, #ios, #macos, #permalink, #phablet, #session-notes

Editor, Media: Stuck scrolling and scroll bleed in gallery preview

In the screenshot below, I can’t scroll the image grid. This happens to me with regularity and often results in falling back to wp-admin. A workaround is to switch the Layout to Individual Images. That’s the only layout that will scroll. I tried doing this for awhile, but a few times of cleaning up after accidentally inserting 20 individual images dissuaded me from developing the workaround into habit.

Screen Shot 2016-02-10 at 4.33.21 PM.png

The image grid in Preview does not scroll, but the window behind the modal does.

This screencast demonstrates stuck scrolling in Preview and scroll bleed to the window beneath the modal.

Core WordPress and Calypso have a sordid history of scroll bleed on iOS. Scroll bleed is a common problem. Previously:

Core fixed many of these awhile ago, although bleed has crept back in.

That was iOS. Now we’re seeing scroll bleed on the desktop as well. I’m not a fan of the effect. Between cursor bleed and scroll bleed, many modern web apps feel like warring layers squabbling over focus and the almighty Z.

#3389-gh-wp-calypso, #chrome, #cursor-bleed, #desktop, #editor, #macos, #media, #media-modal, #scroll-bleed

Editor: Previewing an animated gif, iPhone 6+

When previewing a post with an animated gif (created by Google Photos Assistant) on my iPhone 6+, the featured image at the top of the post displays as big moving pixel blocks that obscure the rest of the page. Also, a tall, image-height cursor bleeds through from the editor. #scroll-bleed, #rogue-cursor, and #cursor-bleed plague Calypso usability on iOS.

Reedfish, Congo Tetras

Theme: Cubic

#ios, #phablet