Page Comparison

A page not rendering correctly may refer to three broad categories:

Incomplete Or Delayed Page Load

...

various symptoms and causes. Below are the most common:

1. Page is blank

   1. Typically caused by a JavaScript error, which will be found in the Console under developer tools.

2. Incomplete page load, i.e., doesn’t load all the components (e.g., missing images, buttons, links).

   It may also refer to a marked increase in the time to load all the page elements

   1. Typically caused by a service not returning data. The service can be identified in the Network tab under developer tools.

3. Slow Page Load

   1. Typically caused by a slow service call. The service call durations can be found in the Network tab under developer tools.

4. Layout Distortion

   1. Page elements load, but the layout appears distorted, with misaligned, overlapping, or skewed page elements.

   2. Typically caused by CSS problems. Problems may depend on browser window size, browser type, or data. The issue may allow be caused by user defined CSS if on a page that renders user CSS.

5. Non-Functional Features or Functions

   1. The page loads successfully, but interactive elements, such as buttons or links, do not respond when clicked.

   2. Typically caused by a JavaScript error, which will be found in the Console under developer tools.

...

When addressing page rendering issues, follow the items below to gather the relevant information.

1. Describe the Issue and Reproduction Steps:

   • Provide a detailed description of the rendering issue, including any specific actions or steps needed to reproduce it.

2. Capture a Screenshot of the Page

   1. Include the relevant area or element where the rendering issue occursentire page, including the URL, title bar, and footer.

3. Document Environment and Page Characteristics

   • Browser Type and Version: Specify the browser being used, such as Chrome, Firefox, Safari, or Edge, along with the exact version number.

   • Operating System: Identify the operating system on which the issue is observed, such as iOS, Android, or Windows, including the version if possible.

   • Device Type and Configuration: Mention the device type, such as phone, tablet, laptop, or desktop, and any relevant configuration details, such as screen resolution or orientation.

   • Page URL: Provide the specific URL or webpage address where the rendering issue occurs.

4. Use the Developer Console to Identify Errors:

   Copy the Browser Console Text:

   1. Open the browser's developer console to inspect and identify any possible errors related to the rendering issue.

      1. How to Open the Browser Console on Chrome, Safari, Firefox, and Edge

5. Take a screenshot of the browser console, look for red text indicating an error

   1. Take a screenshot of the browser console, focusing on any error messages or red text that indicates an issue.

6. 1. Select and copy the text from the browser console, specifically the error messages or relevant information. Use the keyboard shortcut Ctrl+A to select all the text and Ctrl+C to copy itIf the issue is likely to have been caused by a JavaScript error, the Console window will contain the error (the error text will be in red). You can use the mouse to click into the Console window, hit Ctrl-a to select all the text, and then hit Ctrl-c to copy all the text.

   2. If the issue is likely to be due to a service all problem (error or performance), view the Network tab with “Fetch/XHR” selected.

      1. If the problem is an error, click on the service call of interest and include a screenshot from the “Headers” tab and the “Preview” table

      2. If the problem is performance, show a screenshot with the call, but do not click on any of the service calls. Ensure that the “Time” column is visible.

7. Include Information when you open a support ticket here.:

   • Paste the copied text (Ctrl+V) into an email or word processor document to preserve the details.

...