Toolbar box-shadow mask disappears when keyboard is up

[raineorshine]

Note: This is related to a known problem on mobile Safari with position: fixed.

• Mobile Safari - Broken ✗
• Xcode Simulator - Works ✓
• iPhone - Works ✓
• Android - Works ✓

Steps to Reproduce

Set the caret on a thought to enter edit mode and open the virtual keyboard.

Current Behavior

The drop shadow on the toolbar disappears when the toolbar is switched from position: fixed to position: absolute.

https://github.com/cybersemics/em/assets/750276/985acfdb-4813-4bfb-8319-8e92fefb5a00

Expected Behavior

Drop shadow should always be rendered on the toolbar.

[msdewitt]

@raineorshine I'm unable to replicate this error in my local.

Could you provide more information?

[raineorshine]

Platform?

[msdewitt]

Safari, Xcode simulator: Iphone 15 pro

[raineorshine]

Thanks. It's actually already tested on iPhone Simulator where it works correctly (see original issue description above). We know that it is broken in mobile Safari, but it has not yet been tested on a physical iPhone or Android.

If it's only broken on mobile Safari, then we can focus troubleshooting on that platform, but first we need to test iPhone and Android.

[msdewitt]

I'll test it on my android browser.

[raineorshine]

@trevinhofmann Could you test this out on a physical iPhone?

[trevinhofmann]

@raineorshine - The drop shadow is subtle with the new background displayed on the right side, but I have tested with these results:

✅ Physical Android device (Chrome):

https://github.com/user-attachments/assets/1f1bc8df-2e32-4260-b2e9-059229d04618

❌ Physical iOS device (Safari):

https://github.com/user-attachments/assets/be3a5d0f-85b5-4b5d-8a60-09c5cae4ab98

[raineorshine]

Thanks!

In the iOS screenshot, I see a url bar... is that the Capacitor build? Mobile Safari has already been tested, so we're looking to test the Capacitor iOS build on a physical iPhone.

One way to more clearly see the drop shadow is to scroll down so the toolbar overlaps the first thought.

Current

Expected

[trevinhofmann]

Ah, my mistake! I misunderstood. I will test this again with Capacitor.

[trevinhofmann]

✅ Physical iOS device (Capacitor):

https://github.com/user-attachments/assets/542e2e8e-a857-4a72-87a4-c5b8055faf2a

I'll note that this is affected by #2514, but the drop shadow is still visible and does not disappear when opening the keyboard.

[raineorshine]

No, that’s my bad! I definitely didn't communicate that clearly.

Given that this only affects Mobile Safari, and most iPhone users will use the Capacitor build, this task is fairly low priority. Still, it's worth spending a couple hours on it in case there's an easy fix.

@msdewitt Are you able to work on this, or should we find a task to replace it with since this is Mobile Safari only?

[raineorshine]

I got curious and played around with it until I found a tentative solution in 56da55ecdb.

Applying the box-shadow directly to the toolbar container and getting ride of the dedicated masking element does not appear to have any regressions, but I will keep an eye on it. I vaguely recall needing an opaque element to mask the area above the toolbar on overscroll, but I didn't notice any difference this time during testing.

[msdewitt]

@raineorshine Awesome!

[raineorshine]

Sadly I had to revert my fix because it introduced a regression. Moving the boxShadow to the toolbar container causes it to cover the first few thoughts when the ColorPicker is open.

Up for grabs again!