search

cryptee / web-client

Cryptee's web client source code for all platforms.
https://crypt.ee
Other
449 stars 23 forks source link

[Bug] Strikethroughs in checklists have inconsistent behavior #76

Closed dhda closed 3 years ago

dhda commented 4 years ago

Describe the bug

This is a few related UI bugs, all about strikethroughs!

  1. [desktop] Hovering over strikethrough text in a checklist line triggers the hover event of the checkbox.
  2. [desktop] Strikethrough text in a checklist is the only text that properly respects words boundaries when selecting text by double/triple click. That's different from other text in checklists but is the correct behavior, so the bug is that most text in a checklist doesn't respect word-selection semantics and double/triple clicking always selects the entire line.
  3. [iOS] Strikethrough text in a checklist line can't be directly selected. Taps on it don't register. (Incidentally, this is the opposite of my desktop browser–on iOS word-selection semantics work on all text except the strikethrough text.

To Reproduce

Desktop (1,2):

  1. Make a checklist
  2. Strikethrough a subset of the text on a line in the checklist
  3. Move cursor into and out of the the bounds of the strikethrough text
  4. Observe checkbox getting a tick on hover
  5. Double click non-strikethrough text in the checklist
  6. Observe nothing happen
  7. Double click a word within the strikethrough text in the checklist
  8. Observe the word within the strikethrough is selected

iOS (3):

  1. Make a checklist
  2. Strikethrough a subset of the text on a line in the checklist
  3. Try double tapping on a word within the strikethrough text
  4. Observe nothing happens

Expected behavior

All text should respect double/triple click word selection semantics on all platforms, regardless of being in a checklist or being struck through, and strikethrough text shouldn't trigger hover events that other text does not.

Screenshots

strikethroughs video from Firefox on macOS

System Information:

Desktop:

iOS:

johnozbay commented 4 years ago

Thanks for submitting this! We'll take a look and fix up the desktop bugs right away!

As for iOS ... The whole "desktop-class" browsing introduced the a ton of text-selection bugs on iOS 13. (turns out trying to make a touch screen device act like it has a mouse with hovers etc is a bad bad idea – thanks apple –) We've managed to address some of these bugs, but I know there are still some out there in the wild. We'll do our best and get this fixed ASAP. Seems super annoying. sorry about this.

Thanks again for everything & all the bugs you've been filing! 🙏🏻 Best, J

johnozbay commented 3 years ago

Hey there!

So we've actually managed to address 99% of this in the v3 release. This turned out to require an absurd amount of cross-browser testing and burnt through hundreds of cups of coffee! Thanks for this head-scratcher! ☕️😅

There are still 3 CSS rules that we had to leave in there to make sure checkboxes work as intended in Firefox with touchscreens (and some windows laptops with cursor + touch screens).

As a side effect of this, there's a really funky edge-case, where if an item's checked, and has styled elements in it (i.e. strikeout or bold), the styled elements will trigger the hover effect on the checkbox (!), but that's it.

Reason being ... Firefox has a quirk, so we had to leave a hacky workaround in the code :

ul[data-checked=false] { pointer-events: none; }
ul[data-checked=false] > li * { pointer-events: all; }
ul[data-checked=false] > li::before { pointer-events: all; }

a) to make sure when you click / tap on the text, the checkbox isn't selected b) to make sure when you click / tap on the checkbox the text isn't selected.

The only side effect of this is if the item is checked, has a styled element inside, and you hover your mouse over the styled element, it shows the intermediate state on the checkbox as if it may be unchecked if you click/tap, but if you click on the styled element, the styled element is selected as expected, and the checkbox isn't un-checked. It's because of a multi-year long bug in Firefox with touch screens & text selections in general. Hopefully once they fix this, we can remove this hack and things will be 100% fixed.

Thanks a lot for filing this and all the help ✌🏻