Switching a mode button made the whole board wobble
Oct 26, 2026 Β· Tech Β· νκ΅μ΄
Below the Minesweeper board is a control row with two mode buttons: dig (a pickaxe) and flag. Every time I pressed one to switch modes, the board and the buttons wobbled. The board grew and shrank, and the buttons' center positions moved. I had seen the same thing in other games, so this time I tracked down the cause properly.
The layout needs some explaining first. On this site the board size isn't computed by the game's CSS; the site decides it. The board's height is the height of its slot minus the actual height of the control row. So when the control row's height changes, the board size changes with it.
The cause was in how the selected button changed size. To make the selected button stand out, I grew its width and height from 48px to 64px, and to make that look smooth I put transition: all on it. But width and height affect layout. While the transition ran, the two buttons' heights changed for a moment, so the whole control row got shorter and then came back. The board is sized from that height, so it grew and shrank, and the buttons' centers moved along with it.
/* before: the size change affects layout, so the whole row moves */
.mode-btn { width: 48px; height: 48px; transition: all .15s; }
.mode-btn.on { width: 64px; height: 64px; }
/* after: the slot is fixed, only the drawing scales */
.mode-btn { width: 64px; height: 64px; transition: scale .15s; scale: .75; }
.mode-btn.on { scale: 1; }This is a simplified example. The fix was to give both buttons a 64px slot from the start and change their size only with scale. scale changes how the button is drawn, not how much room it takes, so the control row's height never changes. The unselected button is shrunk to 0.75 (an actual tap area of 48px).
I didn't check the fix by eye alone; I checked it with numbers. While switching buttons, I read the board size, the button positions and the control row height 80 times at 10ms intervals and compared them. None of the three values changed.
To keep from repeating the mistake, I wrote the rule into the docs: change button size with scale, and don't use transition: all. all animates even the properties that change layout, which makes it an easy way to have things move where you never meant them to.
References
- MDN, transition: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
- MDN, scale: https://developer.mozilla.org/en-US/docs/Web/CSS/scale
Games from this post
MinesweeperUse the number clues to open every cell without hitting a mine.
Play
More posts
- Minesweeper boards you can finish without guessing Oct 26, 2026
- The wrongly placed flags vanished for 0.7 seconds Oct 26, 2026
- Picking a 3D library and fitting it into a site with no build step Oct 25, 2026
- I deployed, and the old page kept showing for an hour Oct 25, 2026
- Why there is always a cloud within reach in Cloud Hop Oct 25, 2026