adobe / adobe/spectrum-web-components

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

Open
#5,552 2 comments 0 reactions 0 assignees View on GitHub
bug Component:Action menu Component:Combobox Component:Menu Component:Overlay Component:Picker SEV 4 UXP
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] 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:](https://github.com/adobe/spectrum-web-components/blob/cc6e91eca2b5d84769d2ed42758299e2ec57e3b2/packages/overlay/src/PlacementController.ts#L356)

```
// 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

![Image](https://github.com/user-attachments/assets/1a5b9405-3c6f-4f36-a9db-e2203b1a1d2a)

![Image](https://github.com/user-attachments/assets/a8c6bc92-206e-47a9-9f8b-869287c69911)

### 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](https://opensource.adobe.com/spectrum-web-components/index.html) in Adobe CEP 11 extension - for example, for [sp-picker](https://opensource.adobe.com/spectrum-web-components/components/picker/#labels)

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:

```

Deselect
Select inverse
Feather...
Select and mask...

Save selection
Make work path

```

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?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start in packages/overlay/src/PlacementController.ts at computePlacement(), especially the style update around line 356. Check how the computed x/y offsets are applied and verify the placement behavior in an Adobe CEP 11 panel using CEF 3 branch 3729. Done means the overlay appears at the computed position in older hosts as well as modern browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.