[Bug]: Overlays end up at (0,0) in older CEF hosts due to using CSS Transforms Level 2 'translate' property in PlacementController's computePlacement()

[5he1n]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Action Menu, Combobox, Menu, Overlay, Picker, Other

Expected behavior

The overlay/dialog should appear at the computed x/y offsets relative to its trigger by applying the position from computePosition().

In hosts with older CEF with no CSS Transforms Level 2 translate support - for example Adobe CEP 11 panels running CEF 3 branch 3729 (Chromium 88) - the code should fallback to the long-standing transform: translate(...) API so overlays still render in the correct spot.

Actual behavior

Because the code does:

// Update the overlay's style with the computed position.
Object.assign(target.style, {
    top: '0px',
    left: '0px',
    translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,
});

it relies on the CSS Transforms Level 2 translate property, which is not implemented in CEF 3 branch 3729 (Chromium 88). In that environment, setting translate is a no-op, so the overlay falls back to its default origin (0,0).

Screenshots

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code or abstract reproduction which illustrates the problem

Use one of the examples from Spectrum Web Components documentation in Adobe CEP 11 extension - for example, for sp-picker

OR

In a Spectrum Web Components project, import and register Overlay:

import '@spectrum-web-components/overlay/sp-overlay.js';

import '@spectrum-web-components/picker/sync/sp-picker.js';
import '@spectrum-web-components/menu/sp-menu.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
import '@spectrum-web-components/menu/sp-menu-divider.js';
// …

Add this HTML in a CEP panel:

<sp-picker id="uses-sp-field-label">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-picker>

Package and load as an Adobe CEP 11 extension.

Click at picker and observe the dialog rendered at (0,0).

Severity

SEV 4

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[najikahalsema]

@5he1n Hello! Would you be willing to contribute the fix to our library?

As a note, we only support the last two versions of each browser.

[5he1n]

Hi @najikahalsema,

I’ll definitely carve out some spare time to add a fallback.

That said, I’m disappointed that SWC, a perfect fit for Adobe CEP/CEF extensions, doesn’t support the latest CEF runtimes in Adobe products (CEF 88 in CEP 11 and CEF 99 in CEP 12), even if it’s just standalone CSS translate property.

I understand your policy covers only the last two versions of mainstream browsers and that embedded CEF hosts fall outside that scope, but it’s still frustrating.

Anyway, thank you for finding time to look into this.