[Bug]: Layout thrashing in ColorArea component

[Rajdeepc]

Code of conduct

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

Impacted component(s)

ColorArea

Expected behavior

ColorArea should not leak memory

Actual behavior

There are style recalculations happening in render method accessing getboundingClientRect during render.

Screenshots

What browsers are you seeing the problem in?

Chrome, Firefox, Safari

How can we reproduce this issue?

1. Go to https://opensource.adobe.com/spectrum-web-components/components/color-area/#standard
2. Open Memory profiling in Chrome
3. Take a snapshot of heap memory usage
4. Check image below
5. See memory leaks

Sample code or abstract reproduction which illustrates the problem

protected override render(): TemplateResult {
    const { width = 0, height = 0 } = this.boundingClientRect || {};
    // ...
    style=${`transform: translate(${
        (this.isLTR ? this.x : 1 - this.x) * width
    }px, ${height - this.y * height}px);`}

this.observer = new (window as unknown as WithSWCResizeObserver).ResizeObserver(
    (entries: SWCResizeObserverEntry[]) => {
        for (const entry of entries) {
            this.boundingClientRect = entry.contentRect;
        }
        this.requestUpdate();  // This triggers a full re-render
    }
);

Severity

None

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[najikahalsema]

SWC-927