iPad 2 / 4.3.3 | 1024x768
Mobile Safari 5.02Loading...
iPad 1 / 3.2.2 | 1024x768 Mobile Safari 4.0.4Loading...
iPhone 4 / 4.1 | 640x960 Mobile Safari 4.0.5Loading...
Mac OSX 10.6 | 1024x768
Safari 5Loading...
Ubuntu 8.10 | 1024x768
Firefox 3.0.6Loading...
Windows 7 | 1024x768
Opera 11.50Loading...
Windows 7 | 1024x768 Firefox 8Loading...
Windows Vista | 1024x768
Internet Explorer 9Loading...
Windows Vista | 1024x768 Internet Explorer 8Loading...
Windows XP SP3 | 1024x768
Google Chrome 19Loading...
Windows XP SP2 | 1024x768 Internet Explorer 7Loading...
Windows XP SP2 | 1024x768 Internet Explorer 6Loading...
Comparison Results
Quick Start
- Select a "Base" browser for comparing layouts
- Wait for the comparison process to complete. The larger a webpage's DOM, and the larger the number of browsers to compare, the longer this will take.
- Once complete, comparison results will display on this screen indicating the number of layout differences detected per browser
- Click on a browser's result to see a 'Side-By-Side' view of the "Base" and "Comparison" browser with details
Tips
| Tolerance |
Used as the basis detecting layout differences in element positioning and dimensions that should be flagged.
The default is 30px which is a good basis for finding notable differences. To change the Tolerance, enter a new value between 0 and 100, hit Enter, or click outside of the field, in order to update results. |
| View | You can switch between 'Summary' view and 'Side-By-Side' view directly via the select option at the top, but clicking on a result in the 'Summary' view will automatically switch you to the 'Side-By-Side' view for the specified browser. You can also select 'Instructions' view at any point to get back to this page. |
| Info | See the date this test was run and a public URL to this comparison page. Use the public URL to share this layout comparison with other people. When in Side-By-Side view, the public URL links to the browsers in that view. |
| Scale |
When in Side-By-Side' view, you will see an option for Scale at the top. Here you can change how the images are displayed:
Full Size: The actual resolution of the base and comparison images. Scrollbars will appear for both directions as needed. Fit Width: Scale the base and comparison images to fit inside the viewport width. (This makes viewing scrolling long pages simpler) Fit Height: Scale the base and comparison images to fit inside the viewport height. (This usually allows you to see the whole image without scrolling) |
| Scroll Lock | In Side-By-Side' view, there's a "Lock" icon above the middle scrollbar. Click this icon to switch synchronized scrolling of the base and comparison images on or off. When a Layout Difference is selected in the Comparison Results, the lock is automatically disabled as the two images are scrolled to the place of the highlighted element, which enables the images to be scrolled separately. |
| Comparison Browser | In Side-By-Side' view, there's a select box above the browser being Compared. You can select a different browser to compare by changing this selection, clicking the 'Prev' or 'Next' link, or going back to the 'Summary' view and clicking another browser in the results. Each time a new Comparison browser is selected, the Comparison Results loads at the bottom of the screen for this comparison. |
| Comparison Results |
In Side-By-Side' view, you will see the Comparison Results bar at the bottom of the page. Here you can
see the number of layout differences, hidden elements, and missing elements found during the comparison. - Click anywhere on the bar itself to show/hide the information below it. This helps to get a larger view of the images for visual comparisons. - Click a tab in the results to see each list. - Click an item under the Layout Differences list, or Missing Elements list to see the element highlighted in the base and comparison images. - Click a highlighted element for Layout Differences in the image to get more details, or simply point the mouse to the element to get a tooltip with details such as the actual size and position of the element. |
Known Issues
- For best results, all screenshots should be taken at the same resolution. Varying resolution may show false-positive differences.
- If a screenshot fails for a browser, it will not be shown on this comparison page.
- During the screenshot process for each browser, the system attempts to capture the Document Object Model (DOM) for the page. In some cases, javascript errors cause this process to fail. Visual comparisons are still available but no automatic layout differences will be detected.
- Most versions of desktop Safari are unable to capture the DOM and will not be shown here at this time.
- Selecting a browser with no DOM as the 'Base' browser will fail to get comparison results.