Study: 68% of AI-generated webpages have cross-browser rendering failures
New research testing 8 AI tools across 9 browser-device combos reveals most generated sites break.
Multimodal large language models (MLLMs) are increasingly used to generate webpages directly from visual designs, but existing evaluations only check visual fidelity on a fixed browser-device configuration. This new study, authored by Ziyun Guo and colleagues, presents the first systematic empirical analysis of cross-environment rendering compatibility for AI-generated front-end code. The researchers constructed WebCompat, a dataset containing 2,032 annotated instances of webpages generated by 8 representative AI tools, each rendered across 9 browser-and-device combinations. The results are stark: 68% of generated webpages exhibit at least one compatibility issue. The most common symptoms are catastrophic layout failures (88.3%), where pages shrink to fit the target screen with overly small fonts or scale mismatches that cut off content. Issues localized to individual elements, such as image distortion or missing components, are less frequent (13.4%). The study also finds that while most MLLMs incorporate responsive design patterns, they frequently fail to implement these correctly, producing code that is semantically misleading.
To address these issues, the authors developed XCompat, a lightweight offline compatibility issue detector that analyzes both visual screenshots and the structural DOM tree. XCompat achieves an F1 score of 0.903 on the WebCompat-test set, outperforming existing compatibility checking tools and LLM baselines. This tool provides a practical way for developers to catch rendering bugs before deployment, without needing expensive cloud-based testing. All datasets and tools are publicly released to support future research on rendering reliability in MLLM-based code generation. The findings highlight a critical gap in AI-assisted web development: generating visually accurate code is not enough—it must actually work across the fragmented landscape of browsers, devices, and screen sizes. As more teams rely on LLMs to produce front-end code, tools like XCompat could become essential for maintaining quality and user experience.
- 68% of the 2,032 AI-generated webpages in the WebCompat dataset had at least one cross-environment rendering issue
- Layout-wide failures accounted for 88.3% of issues, including tiny fonts and cut-off content from scale mismatches
- XCompat detector uses visual screenshots + DOM tree to hit 0.903 F1, beating existing compatibility checkers
Why It Matters
AI-generated front-end code often breaks across real-world browsers and devices, so teams need validation tools like XCompat before shipping.