[ObjectPageTitle]: pseudo has() limited browser support - breaks UI in Android devices

[amdev138]

Describe the bug

Hi team,

There are a couple lines of code in ObjectPageTitle/index.tsx#L172 that execute querySelector using the pseudo has() css selector. This selector is not widely supported. In Android devices you will get a runtime exception such as,

and this exception will cause the entire page to not render.

Please use an alternative selector that is commonly supported across all devices/browsers.

:has(> :nth-last-child(n + 2)) > [ui5-toolbar]:last-child

https://caniuse.com/css-has

Thanks,
Allen

Isolated Example

No response

Reproduction steps

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

main

UI5 Web Components Version

main

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

Organization

SF

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @amdev138

UI5 Web Components for React is following the browser support of UI5 Web Components, therefore the latest two versions of all major browsers will be supported.

Browser

Chrome, Edge, Firefox, Safari

Your link shows that all of these Browsers support this feature. Also, it's not only used in our project, but in ui5-webcomponents as well.

Unfortunately, we can't offer support for "niche" or legacy Browsers, that's why I'm closing this issue.

[amdev138]

Hi @Lukas742 ,

In SF Mobile App, some of the pages are a hybrid web page. This is done via webView and if anyone has a device two years old (fairly common) it will use Chromium <105 in which has() is not supported. This is a huge number. There is a very simple solution that would work equivalently,

const toolbarContainer = toolbarContainerMutation.target as HTMLDivElement;

// Find the last child element and ensure there are at least two children
if (toolbarContainer.children.length >= 2) {
  const lastChild = toolbarContainer.lastElementChild as HTMLElement;

  // Check if the last child is a [ui5-toolbar]
  if (lastChild && lastChild.matches('[ui5-toolbar]')) {
    // Iterate over the children of the navigation toolbar
    Array.from(lastChild.children).forEach((item) => {
      item.setAttribute('overflow-priority', 'NeverOverflow');
    });
  }
}

Why not even consider this small ask?

[Lukas742]

@amdev138 :has is not only used here, also we're using many other APIs that aren't supported for Chrome <105. E.g. container queries, scrollbar styles, the popover API - just to name a few that came to my mind. So, you will most probably face other issues as well and polyfilling all of these APIs is unfortunately not feasible.

[codefactor]

@Lukas742 ,
Can you help me to better understand why you're not going to help us here?

These other Chrome<105 issues you mentioned - are these all page breaking issues that would block the functionality of the entire app just like this?

What is the worst that could happen if you were to patch the ObjectPageTitle so that it didn't just crash the entire app by using some alternative to this :has selector?

Imagine of SuccessFactors were to polyfill the .querySelector function this code is using that just bombs - but instead of bombing when getting a selector with :has it would just return undefined instead.

This PopoverAPI thing - does that mean that Popups won't show up?

[Lukas742]

Hi @codefactor, @amdev138 and @ilhan007 (fyi)

It's not that we don't want to help you, but I have concerns that fixing this issue might only be the first of many that arise due to unsupported APIs. The :has pseudo-class is a feature in Baseline 2023, and it has been supported by all major browsers for over two years. Since we only support the latest two major versions of the defined browsers, even if we polyfill this behavior here, it doesn't mean that it's not used somewhere else or will be added somewhere in the future.
If you'd like to discuss general browser support, I think it's best to take it internally and involve the UI5 Web Components team, as most components are developed by them. Could you please include @ilhan007 when reaching out?

These other Chrome<105 issues you mentioned - are these all page breaking issues that would block the functionality of the entire app just like this?

I can't say for sure, but if we expect a property to be available when it isn't, it could cause an error that breaks the entire app, especially if no error boundaries are in place. Even if the app is not crashing, the component using the unsupported feature will not work or look as intended though.

What is the worst that could happen if you were to patch the ObjectPageTitle so that it didn't just crash the entire app by using some alternative to this :has selector?

Patching this single instance wouldn’t be an issue, but we cannot guarantee that the component will work even with the fix. E.g. since the Popover API is not supported and the ObjectPage uses a popover in its TabContainer (overflow - "More" button), even with the fix, the page most probably won't function as intended.

This Popover API thing — does that mean popups won’t show up?

I believe the component will at least crash, possibly even the whole page, but I haven’t tested it myself.

---

Also, could you elaborate on this statement?

This is done via webView and if anyone has a device two years old (fairly common) it will use Chromium <105 in which has() is not supported. This is a huge number.

I didn't read into this in detail, but it seems that since Android v7 (2016) WebView is updated through the Google Play Store independently of the OS, so users can just update WebView to a version that supports Chromium well past version 105. So, this should only be a problem for devices using Android < v7 which I can't believe is a huge number. Please don't hesitate to correct me if I'm wrong though, as I'm not familiar with Android update policies and WebView support.

[codefactor]

@Lukas742 ,
I agree, that this could be just the first of a line of issues that we are unable to quantify at this point. That's more our concern and less your concern. We know about this issue, so we reported it - can it then be solved on a case by case basis?

[Lukas742]

I will test if replacing has will affect performance, if that's not the case or if it's negligeable we will refactor the implementation.

Could you please define the exact version of WebView were this feature is not supported, so we can document this internally?

[ilhan007]

Hello Scott @codefactor,

As Lukas mentioned, this might be the first of several issues. One key point to consider is the Popover API, which was introduced in UI5 Web Components version 2. This API has been supported since Chrome 114. If you are using version 2 with a Chrome version below 114, popups will not be displayed at all. And it's not something that can be addressed (in v2, with v1 it would not be a problem).

I understand this may be inconvenient, but the solution would be to update your WebView, which can be done independently via the Google Play Store.

Could you share the device and Android OS version you are using, as well as any challenges you might be facing with updating?

BR,
ilhan

[amdev138]

Hi @ilhan007 and @Lukas742 ,

Our mobile ENG colleagues are telling me it is happening on Android 33 sdk and lower - Android 13 released in 2022 - and no issues when testing Android 35 sdk - Android 14 release October 2023.

Thanks for your support!

[ilhan007]

Hi @amdev138 Allen,

I assume that you will have popups in this apps/pages.

and just to note it again in case you missed it, that the popover API (all ui5 web components popups in v2 are now based on it, replacing the static area approach from v1) can't work if these minimum requirements are not met:

• Minimum Chrome version required: 114
• Minimum WebView version required: 114

For devices on Android OS >7, you can update/ suggest updating to a newer Chrome/WebView versions

Unfortunately, there is not polyfill for the Popover API to workaround this.
And, bringing the static area back into ui5 web components version 2 would be huge - while technically possible, it will be great investment and really hard for maintenance.

[amdev138]

Hi @ilhan007 ,
Thanks for the info. yes, we are aware of the popup api issue and we are exploring solutions internally. But even though it’s not supported, it doesn’t break the entire page whereas this pseudo has in a querySelector will throw a dom exception which bombs out the entire page.
Thanks,
Allen

[Lukas742]

🎉 This issue has been resolved in version v2.8.0 & v2.7.3 🎉

The release is available on v2.8.0

The release is available on v2.7.3