Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use a fixed toolbar for the block toolbar in mobile #18663

Closed
wants to merge 2 commits into from

Conversation

@youknowriad
Copy link
Contributor

youknowriad commented Nov 21, 2019

closes #18632
closes #14419

This is the nth attempt to use a fixed toolbar in mobile (See #18632 for the reasoning about why it could work this time).

Capture d’écran 2019-11-21 à 12 38 12 PM

We need to test this on real devices (which I don't have) and there's probably a bunch of issues I'm missing but on a small viewport on desktop this feels way better than what we had.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 21, 2019

Thank you so much for exploring this. I strongly believe a top-docked toolbar is critical path important to ensuring that the mobile experience is good.

However unfortunately this branch doesn't address the fundamental issue as higlighted in the illustration in #7479 (comment). Here's a GIF:

simulator

You don't have to have a physical device to test, but you have to test it on the actual Mobile Safari for the unique quirks to show up. The way to debug is this:

  • Install Xcode from the app store
  • Then you can open Xcode > Open Developer Tool > Simulator

This opens up a simulated iOS environment, but it's actual iOS and actual Mobile Safari it runs. Better yet it integrates with MacOS, you can copy paste between your dev browser and the URL bar inside the ipad simulator, it’s even bridged so you can run localhost. You can also the Safari on the desktop to inspect inside mobile safari in the simulator. That way you can most literally inspect, tweak, change and test the markup realtime, on the iphone.

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Nov 21, 2019

@jasmussen Do you know how technically we should solve the issue? Is it by applying "position: fixed"? Right now the header is "position: sticky" on mobile.

Also, if we do make it fixed and not sticky what do we do with the Admin toolbar (the black one), should we just hide it entirely?

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 21, 2019

To expand a little bit, for this to work, some things need to happen.

We need to change how the toolbar and general layout is created on iOS. This codepen shows something that gets us very close: https://codepen.io/joen/pen/yWWRrm

You can test this URL in Mobile Safari in the simulator: https://cdpn.io/joen/debug/yWWRrm/gareYzzyRqPr

Here's what that looks like:

ios13 2019-11-21 14_41_00

What's going on here is:

  • When the soft-keyboard shows up, the entire viewport gets pushed upwards. Which means if you have just fixed something to the top of the viewport, that gets pushed out of view.
  • However it appears that you can have a fixed position element, in the case of the codepen example, a content div, that does resize, meaning the toolbar will show up even when the softkeyboard shows.

The problem that remains is that if you scroll to the bottom of the page, there's some whitespace there from the body element underneath the resized element that you can still scroll. So we likely need to apply a hack so you can't scroll the body element.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 21, 2019

Also, if we do make it fixed and not sticky what do we do with the Admin toolbar (the black one), should we just hide it entirely?

There are a few options to explore here, provided we find a feasible approach. One is to make the block toolbar sticky as opposed to fixed, so you scroll past the adminbar before that, or we can some some fancy "scroll collapsing". This should be within reach. But I'm still curious whether we can stop the body from scrolling at all, and scrolling only the container, as shown in that codepen I linked.

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Nov 21, 2019

To be fair, I think you're better positionned to fix this issue as you understand it better :) Do you think you could give it a try in this PR (as time allows). It should all be in one file editor-regions/style.scss

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 21, 2019

I'm not sure I have the skill to explore the ontouchstart hacks probably necessary to make this work.

Also CC: @frontdevde as I think he meant to look also.

@frontdevde

This comment has been minimized.

Copy link
Contributor

frontdevde commented Nov 21, 2019

Thanks for the ping, @jasmussen!

After creating #18632 yesterday, I started some more exploration into possible solutions for the remaining issues mentioned. I haven't found a satisfying solution yet though.

It's the end of the day for me over here and I'm out of office tomorrow but I'd be happy to continue looking into this next week if we're still in need of a solution.

@mapk

This comment has been minimized.

Copy link
Contributor

mapk commented Nov 23, 2019

What if we moved the toolbar to the bottom? Does that effect how Safari works with fixed areas on screen?

safari-fixed 2019-11-22 16_08_21

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 23, 2019

I'll give that a shot. But in the past we avoided that (fixed bottom) because that would also scroll out of view, and it would vary how much depending on soft keyboard height (zoom level, alternate keyboards, screen resolution).

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 23, 2019

By the way it's correct that the bugginess of Mobile Safari can only be experienced on a physical device or the simulator.

However the specific bugginess I explain in #18686 is only reproducible if you also toggle the soft keyboard, which changes the Mobile Safari behavior to be even more buggy:

Screenshot 2019-11-23 at 13 01 39

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Nov 25, 2019

@mapk I tried a bottom toolbar. Unfortunately it's a fair bit worse than the top-docked toolbar.

bottomdocked

The trigger really is that the soft keyboard has to show up, this is what's causing the viewport issues with two scrolling containers and none of them sized correctly.

  • When it's docked to the top, the toolbar starts out of view above the block. But it's accessible by swiping down just a little bit.
  • When it's docked to the bottom, the toolbar starts out of view below the block, but you have to scroll way to the bottom for it to come into view.

The issue with being able to scroll the body element is present in both approaches, but is made worse in the bottom-docked version because it's more likely to trigger when trying to make the bottom-docked version show up.

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Nov 25, 2019

Superseded by #18686

@youknowriad youknowriad deleted the try/fixed-mobile-toolbar branch Nov 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.