Putting a reference beside an implementation seems to expose differences immediately. An animated screen, however, changes according to the captured moment. Reviewing historical QA, I distinguish screen state from an actual implementation difference before deciding what to correct.

One comparison document records part of an adjacent image during a reference transition. A separate preservation task requires retaining original full-page and reveal timing. These records inform a method for establishing and recording comparable conditions.

Align the screen state before comparing

Equal viewport dimensions still produce differences when one capture shows the first slide and the other the third, or when a menu is open in only one. The inspected historical comparison document records both desktop and mobile sizes and the selected slide and menu states. The image and its conditions belong together.

I align the page role, language, scroll position, selected slide and open panel first. Matching dimensions do not establish a matching state. Recording the differing conditions prevents treating them prematurely as spacing or CSS errors.

Do not reproduce a transitional fragment as a design rule

A historical review records that a reference carousel was captured between frames, leaving a narrow fragment of the adjacent slide. The implementation used the complete corresponding asset without reproducing that transient strip as a separate design. That is evidence against treating every captured shape as a static requirement.

A difference should not simply be dismissed as animation either. Compare the same material after the transition settles and distinguish geometry that still differs. Keeping a possible timing explanation separate from an actually observed state supports a better correction decision.

Record font and image readiness

An immediate capture may include a fallback font or images that have not appeared. Identical declared text size with a different font can change heading wraps and button widths. An unready image region is also a different state from the final screen.

A real browser can establish font and image readiness and whether the selected frame has settled before recording those facts. A fixed wait is not automatically a completed readiness check. The same elapsed time does not guarantee the same material state under different loading conditions.

Separate page movement from slide movement

Full-page section movement and a slider within that section may occur together. The preservation contract contains separate movement and reveal timings. One settling does not establish that the other has finished. Record both the entered section and the selected material inside it.

Changing transition time merely to align a screenshot can change operational behavior. A preservation task retains the original timing and connection while establishing a settled comparison state. A newly designed movement needs its own decision. Capturing comparable evidence and changing a function are different actions.

A small tool for checking recorded conditions

The following function checks whether two capture records have comparable conditions. Missing or differing size, position, language, slide, menu and readiness return reasons. It does not acquire a screenshot or calculate visual difference. The person observing the screen must establish the accuracy of the recorded flags.

Ten checks used synthetic records: equal conditions, changed slide, menu, language and scroll, unconfirmed fonts and motion, changed viewport, missing or string flags and input preservation. A comparable-state result contains no claim of design equivalence. Readiness checking and visual comparison are separate work.

Explore the implementation

JavaScript · Compare recorded capture conditions

export function compareCaptureConditions(reference,implementation){
 const reasons=[];
 for(const [name,capture] of [['reference',reference],['implementation',implementation]]){
  if(!capture||!Number.isFinite(capture.viewport?.width)||!Number.isFinite(capture.viewport?.height)||capture.viewport.width<=0||capture.viewport.height<=0)reasons.push(name+':viewport-unrecorded');
  if(!Number.isFinite(capture?.scrollY))reasons.push(name+':scroll-unrecorded');
  for(const flag of ['fontsReady','imagesReady','motionSettled'])if(capture?.[flag]!==true)reasons.push(name+':'+flag+'-unconfirmed');
  for(const field of ['pageKey','language','slideKey','menuState'])if(typeof capture?.[field]!=='string'||!capture[field])reasons.push(name+':'+field+'-unrecorded');
 }
 if(reference&&implementation){
  for(const field of ['pageKey','language','slideKey','menuState'])if(reference[field]!==implementation[field])reasons.push(field+'-differs');
  if(reference.viewport?.width!==implementation.viewport?.width||reference.viewport?.height!==implementation.viewport?.height)reasons.push('viewport-differs');
  if(Number.isFinite(reference.scrollY)&&Number.isFinite(implementation.scrollY)&&Math.abs(reference.scrollY-implementation.scrollY)>1)reasons.push('scroll-position-differs');
 }
 return {readyForComparison:reasons.length===0,reasons,scope:'Recorded capture conditions only. Matching conditions do not establish visual equivalence or verify the accuracy of supplied flags.'};
}

Judge actual differences after aligning conditions

Once conditions align, inspect actual differences in title baselines, spacing, image crop and button placement. Reviewing larger structure before smaller spacing makes the correction easier to explain. One image cannot establish all behavior and responsive states.

This article draws on preservation documents, historical capture review and checks of the new metadata function. Reference screens and original assets retain their provenance; they are not reclassified as my original design achievements. New browser capture and visual comparison were not performed. Application continues with real screens under the recorded conditions.