mWeb Chrome - Blue box hightlight on parent div in LHN in help docs

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to https://help.expensify.com/hubs/split-bills on mobile device.
2. Open LHN and click on any of the links below Split bills.
3. Notice a blue highlight box appears around all the links i.e the parent div.

   Expected Result:

   The blue highlight should not appear at all because it does not appear in Safari/Chrome on IOS but only appears in Chrome on Android.

   Actual Result:

   A blue highlight box appears around all the links i.e the parent div.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android / native
• [x] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [ ] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.3.49-0 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/43996225/be4bf20b-8c1c-43af-9b81-adae15948c5a

https://github.com/Expensify/App/assets/43996225/a2461c61-89b2-411c-aa4a-40ece337065d

Expensify/Expensify Issue URL: Issue reported by: @Talha345 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690473637347049

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @tjferriss (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot[bot]]

Bug0 Triage Checklist (Main S/O)

• [ ] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [ ] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [ ] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[spcheema]

Proposed solution

Please re-state the problem that we are trying to solve in this issue.

mWeb Chrome - Blue box highlight on parent div in LHN in help docs

What is the root cause of that problem?

It's the default behavior for highlighting or indicating focused elements, such as links or buttons, when they are touched or interacted with on a touchscreen device.

What changes do you think we should make in order to solve the problem?

Set the following CSS property to remove the highlight color:

-webkit-tap-highlight-color:transparent for all elements

Reference from Apple documentation: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

By default, when the user taps a link or a JavaScript clickable element, Safari on iOS highlights the area in a transparent gray color. Using the-webkit-tap-highlight-color CSS property, you can either modify or disable this default behavior on your web pages.

It's compatible with the following browsers.

https://caniuse.com/?search=-webkit-tap-highlight-color

What alternative solutions did you explore? (Optional)

N/A

[spcheema]

But I observed tap backgrounds on other places as well. Not sure if we really want to interfere with default behavior. We should disable it globally.

[Talha345]

Note:

I posted this proposal with the Bug Report in Slack here but the QA member forgot to add it to the issue so adding it here again and therefore I think it should be given priority to the proposal above.

Proposal

Please re-state the problem that we are trying to solve in this issue.

A blue highlight appears around the parent div when clicking on any of the sublinks below Split Bills in LHN on Chrome in Android.

What is the root cause of that problem?

The behaviour of the tap highlight in Android Chrome is a design decision made by the browser's developers and therefore is the default behaviour. We already have a custom CSS to highlight the the link once it is clicked so we do not need this highlight.

What changes do you think we should make in order to solve the problem?

Since this issue only appears in Android Chrome and we do not have any such highlights in Safari/Chrome on IOS, we should disable the blue highlight altogether which can be done by setting the following CSS property here:

* {
    -webkit-tap-highlight-color: transparent; 
}

What alternative solutions did you explore? (Optional)

If we decide not to disable the tap highlight behaviour (although I believe we should), we should try to fix the behaviour such that the highlight appears only on the tapped link and not on the parent div.

[kavimuru]

@spcheema I forgot to post @Talha345 proposal. That is my mistake.

[tjferriss]

I'm going to close this as I think we should stick with the default behavior for now. This is not a bug that is preventing someone from using the app.