DevTools grid overlay misrender with writing-mode: vertical-lr

#40215569 Filed 2022-02-17 Assigned (P4)

Summary

reproducer

This page reproduces the original report: a CSS grid with writing-mode: vertical-lr.

When Grid overlay is enabled in DevTools, the overlay can appear shifted relative to the actual grid in affected builds.

Standalone Reproducer

Use this exact element in DevTools

The inline demo is removed here. Use the standalone page for repro and overlay checks.

Open standalone file with exact original snippet

Before / After Screenshots

Before fix (offset visible)
Before fix screenshot showing offset overlay
After fix attempt
After screenshot from patched build

Manual Repro Steps

  1. Open standalone.html in Chrome.
  2. Open DevTools and go to Elements.
  3. Select the .grid element.
  4. Open the Layout pane and enable the grid overlay checkbox for this node.
  5. Expected: overlay border and lines align exactly with the rendered grid tracks.
  6. Actual on affected builds: overlay appears offset/misaligned.

Reference CSS

.grid {
  position: absolute;
  inset-inline: 0 0;
  inset-block: 0 0;
  inline-size: 800px;
  block-size: 600px;
  border: 2px solid #000;
  margin: auto;
  display: grid;
  gap: 3px 10px;
  grid-template: 150px 150px 150px / 150px 150px 150px 150px 100px;
  justify-content: start;
  align-content: center;
  align-items: center;
  writing-mode: vertical-lr;
}