developer.salesforce.com - "Type" and "Products" drop-down menus do not work

[webcompat-bot]

URL: https://developer.salesforce.com/code-samples-and-sdks

Browser / Version: Firefox Mobile 106.0
Operating System: Android 12
Tested Another Browser: Yes Chrome

Problem type: Site is not usable
Description: Buttons or links not working
Steps to Reproduce:
"Type" and "Products" drop-downs do not drop down on click. Disabled all tracking protections in hope an important script was blocked but still no change

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20221010181815
• channel: release
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[sv-calin]

Thank you for reporting this issue, I was able to reproduce it.

Tested on:
• Browser / Version: Firefox Focus 106.0-20221010181815 / Firefox Nightly 108.0a1-20221023100414 / Firefox Release 106.0-20221010181815 / Chrome 106.0.5249.126
• Operating System: OnePlus 6 A6000 (Android 11) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density) / Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Notes:

1. Reproducible on both Firefox Release and Nightly as well, regardless of the ETP status
2. Not reproducible on Chrome

Moving to Needsdiagnosis.

[qa_43/2022]

[ksy36]

The issue also reproducible in Safari. There seems to be a difference with how .offsetParent of a shadow dom element child (<div class="popover-container">) is detected in this function:

function yt(t) {
  return M$2(t) && getComputedStyle(t).position !== 'fixed' ? t.offsetParent : null
}

It is used in calculations to position the box with options.

In Chrome .offsetParent of <div class="popover-container"> is a positioned element inside a different shadow root (<div class="section align-left">):

And in Firefox it's a positioned ancestor of the normal non shadow tree:

According to w3c/csswg-drafts#159, .offsetParent shouldn't leak a node inside a shadow tree, so Firefox behaviour appears to be correct.

This is a duplicate https://bugs.chromium.org/p/chromium/issues/detail?id=920069 which is currently being worked on.

Interestingly, there is a bug that requests shadow tree elements be accessible by querying .offsetParent (basically what Chrome is doing now and not the new behaviour). Not sure what the state of it though.

I have tested Chrome with --enable-features=OffsetParentNewSpecBehavior flag from https://bugs.chromium.org/p/chromium/issues/detail?id=1334556#c12 and it matches Firefox and Safari. Let's close this as a duplicate.

[ksy36]

FWIW, we could probably contact the site to see if they can change this since it's also broken in Safari

[webcompat-bot]

Generate outreach template