CSS Lab · LAB-02UNSOLVED

The Missing Button

The button is in the DOM. The CSS says it is visible. Nobody can see it. The developer insists everything is correct, and the developer is telling the truth.

Status: UNSOLVED
Level: DEVELOPER
Threads: 06
Suspects: 04

The scene

A checkout page. The 'Complete order' button renders on the developer's machine and vanishes in production for roughly 4% of sessions. There is no JavaScript error. The element is present in the inspector, highlighted, with a real bounding box.

example.htmlhtml

1<div class="checkout-footer">2 <p class="legal">By continuing you agree to the terms.</p>3 <button class="cta">Complete order</button>4</div>

Markup, exactly as served

example.csscss

1.checkout-footer {2 height: 72px;3 overflow: hidden;4 padding: 16px;5}67.legal { font-size: 13px; line-height: 1.5; }89.cta {10 display: block;11 opacity: 1;12 visibility: visible;13 color: #fff;14 background: #1b5e20;15}

Relevant styles, exactly as served

01Evidence board0 / 3 material findings

02Name a suspect

Resolution sealed until a suspect is named

References

01MDNoverflow
02W3C i18nText expansion in localisation