Article · Engineering
Why was the light landing 11 pixels to the left?
Our cards turn into light when you click them, and the light lands on the real image on the next page. How we found a small shift in that landing, and why our test missed it.
In this post
In short
- The light was landing 11 pixels left of the real image, so for a moment you saw a double image.
- The cause was simple: we measured the drawing area with the scrollbar included.
- Our test checked where the box was, not the object drawn inside it. We changed that too.
How the transition works
When you click a card, it breaks into points of light. The points build a copy of the object in light at the centre of the screen. The page changes, the same light stays in the same place on the new page, then it flies into the image frame and becomes the real picture.
This only works on one condition: the light has to land exactly on top of the real image. Even a few pixels of difference shows up as two pictures.
How the shift was noticed
The automated checks were passing. The About page passed 20 of 20 tests and Mobile Apps passed 23 of 23. Still, something looked wrong in the transition.
We measured the recordings frame by frame. The light was landing between 140 and 357 on the emblem's x axis. The real image sat between 151 and 368. The size and height were the same, so it was a pure sideways shift.
The cause: the scrollbar
The transition took the width of its drawing area from the window. The window's width includes the scrollbar, and the visible part of the page doesn't. The drawing was calculated for a wider area than it really had, then squeezed into the visible one.
const W = window.innerWidth;
const W = host.clientWidth || window.innerWidth;Why the test missed it
Our test measured where the transition's box was, and the box was in the right place. What had shifted was the object drawn inside the box. So we changed the test too: it now compares the drawn pixels with the real image.
The result
| Page | Shift before | Shift after | Brightness step before | After |
|---|---|---|---|---|
| About | 11 px | 0 px | 11.5 | 1.2 |
| Mobile Apps | 11 px | 0 px | 23.4 | 1.8 |
It was a small bug. The real lesson was this: if a test doesn't measure what the visitor sees, passing it doesn't tell you much.