[BUG]: marker.colorbar.thicknessmode='pixels' collapses scatter-matrix layout after Plotly.restyle, while initial render is normal

[ym-xie]

Description

When initializing a Plotly scatter-matrix figure with a splom trace whose marker
colorbar has marker.colorbar.thicknessmode='pixels', the initial render displays
normally: the scatter-matrix panels remain visible and the colorbar stays narrow.

However, if the same base figure is rendered first and the same property value is
then applied dynamically through Plotly.restyle, the layout collapses. The
scatter-matrix panels are squeezed into a very narrow strip on the left, while the
colorbar gradient occupies most of the figure canvas.

The setting is accepted by plotly.py and emitted as a valid trace property, so this
appears to be a Plotly.restyle/update-time layout calculation issue for splom
marker colorbars rather than an invalid Python-side property assignment.

Screenshots/Video

Steps to reproduce

1. Install the screenshot dependencies if needed:
   pip install plotly pandas playwright && playwright install chromium.
2. Run this script. It saves two screenshots in the current directory:
   • plot1.png: Python-side initialization sets
     marker.colorbar.thicknessmode='pixels' before the first render. This renders
     normally.
   • plot2.png: the same base figure renders first, then JavaScript applies the
     same value with Plotly.restyle. This shows the collapsed layout.
3. Compare the two generated screenshots.

import plotly
import plotly.express as px
import plotly.io as pio
import time
from playwright.sync_api import sync_playwright

print(f"Plotly version: {plotly.__version__}")


def make_fig():
    df = px.data.iris()

    fig = px.scatter_matrix(
        df,
        dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"],
        color="species",
    )

    fig.update_layout(
        xaxis={"matches": "y"},
        xaxis2={"matches": "y2"},
        xaxis3={"matches": "y3"},
        xaxis4={"matches": "y4"},
        height=900,
        width=750,
        dragmode="select",
        selections=[
            dict(x0=3, x1=4, xref="x2", y0=8, y1=6, yref="y"),
            dict(x0=5, x1=1, xref="x3", y0=5, y1=4, yref="y"),
        ],
    )
    return fig


fig = make_fig()

# Screenshot 1 / plot1.png: set the value in Python before the first render.
fig.data[1].marker.colorbar.thicknessmode = "pixels"
assert fig.data[1].type == "splom"
assert fig.data[1].marker.colorbar.thicknessmode == "pixels"
print(fig.data[1].marker.colorbar.to_plotly_json())
html1 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")


# Screenshot 2 / plot2.png: render first, then apply the same value with JS.
fig.data[1].marker.colorbar.thicknessmode = None
html2 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")
restyle_script = """
<script>
window.addEventListener("DOMContentLoaded", () => {
  var plotEl = document.getElementsByClassName("plotly-graph-div")[0];
  setTimeout(function() {
        Plotly.restyle(plotEl, {"marker.colorbar.thicknessmode": "pixels"}, [1]);
  }, 1000);
});
</script>
"""
html2 = html2.replace("</body>", restyle_script + "\n</body>")


with sync_playwright() as p:
    browser = p.chromium.launch(
        headless=True,
        args=["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
    )
    page = browser.new_page(viewport={"width": 1200, "height": 800})

    page.set_content(html1)
    time.sleep(1.5)
    page.screenshot(path="plot1.png")

    page.set_content(html2)
    time.sleep(2.0)
    page.screenshot(path="plot2.png")

    browser.close()

print("Saved plot1.png and plot2.png")

Notes

Add info here that doesn't fit in the other sections.