Visual bug
A visual bug is a defect in how a user interface renders: an element that overlaps another, text that overflows its container, a button pushed off screen, a colour or font that differs from the design. The underlying function works; what the user sees is wrong. A visual bug often depends on the browser, viewport, zoom level or device, so the reporter's rendering is not the developer's.
The longer version
Rendering is the product of the markup, the stylesheet, the browser's layout engine, the viewport size, the fonts installed, the zoom level and the content that actually arrived. A visual bug is a mismatch anywhere in that stack: a stylesheet rule that assumes a fixed width, a flex container that never accounted for a long product name, an image without dimensions that shifts the page when it loads, a font fallback that is wider than the intended face. The same page is correct on the developer's laptop and broken on a phone, or correct with the sample data and broken with a real customer's forty-character company name.
The contrast is with a functional bug, where the software computes or does the wrong thing. A visual bug leaves the function intact: the form submits, the total is right, but the submit button is hidden under a sticky footer on a short viewport. The line blurs at the edges. A button that renders off screen is visual in cause and functional in effect, because the user cannot complete the task. Severity follows the effect, not the cause: a cosmetic misalignment is trivial, a hidden call to action on the checkout page is critical, and both are visual bugs.
Visual bugs fail at the reporting stage. 'The layout is broken on the pricing page' cannot be reproduced without the viewport width, the browser and version, the zoom level and the operating system, because the reporter's rendering is not the developer's rendering. The report needs to show, not tell: a screenshot with the broken element marked, the viewport size, and the page as it was, including the data that stretched the container. Without those, the developer opens the page, sees it rendered correctly and closes the ticket, and the bug survives until the next reporter.
Common questions
What is the difference between a visual bug and a functional bug?
A functional bug makes the software do or compute the wrong thing; a visual bug makes it render wrongly while the function behind it works. The distinction matters for who fixes it and how it is found: functional bugs surface in logic and data, visual bugs in specific browsers, viewports and content lengths that the developer's own setup never showed.
Why does a visual bug appear in one browser and not another?
Browsers implement layout, fonts and defaults differently, and a stylesheet that relies on one browser's behaviour renders differently in another. Viewport width, zoom level, installed fonts and the length of the actual content change the rendering too. A visual bug report without the browser, version and viewport cannot be reproduced.
How do you report a visual bug?
With a screenshot in which the broken element is marked, the page URL, the browser and version, the operating system, the viewport or device, the zoom level if it is not the default, and the content that was on the page. The rendering the developer needs to reproduce is the reporter's, and every one of those details shapes it.
What severity should a visual bug get?
The severity that matches its effect on the user, never a default of trivial because it is only cosmetic. A misaligned icon is trivial; a submit button hidden under a sticky footer is critical, because the user cannot finish the task, even though the cause is a stylesheet rule. Rate what the user cannot do on the affected browser and viewport, and let the cause decide who fixes it.
Can visual bugs be caught by automated testing?
Visual regression tools compare a screenshot of each page with an approved baseline and flag pixels that changed, which catches layout drift a functional assertion never sees. They cannot judge whether the changed rendering is wrong, so every difference needs a person to approve or reject it, and dynamic content such as dates and advertisements produces false alarms. Visual bugs in new screens, and on devices the suite does not run, still arrive from people.
Bug reports that arrive ready to triage.
Collect replay, console, network and browser context with the Free plan.