corner-shape: notch radius flicker

#558956325 Filed 2026-09-09 Assigned P4 / S3 Blink paint

Animated reproducer

Live rendering

Toggle the checkbox inside the frame several times. Affected Chromium builds briefly draw green top and right border segments while interpolating the top-right radius from 184px to 185px.

Critical interpolation frame

At border-top-right-radius: 184.1px, the corner hulls should remain almost touching. Use the tabs to compare the browser's live output with the fixed baseline.

⬇ Download reproducer Open issue

Expected behavior

No transient edge segments

Once the adjacent notch radii consume the full 304px border box, the top and right edges stay collapsed throughout the transition. Changing the radius must not cause a visible 9.5px geometry jump.

Root cause

The opposite-corner hull solver stopped its binary search when the scale interval reached 0.05. A tiny floating-point intersection could therefore reduce the combined radii from 304px to 294.5px for one animation frame. The fix solves the scale to float precision.

Minimal CSS

.shape {
  box-sizing: content-box;
  width: 300px;
  height: 300px;
  border: 2px solid green;
  border-radius: 120px;
  border-top-right-radius: 184px;
  background: lightblue;
  corner-shape: notch;
  transition: border-top-right-radius 1s linear;
}

.changed .shape {
  border-top-right-radius: 185px;
}