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

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.