Page Not Rendering Correctly

Owned by john Putzke
Last updated: Oct 18, 2023
3 min read

A page not rendering correctly may refer to 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).

    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.

Rendering Steps

When addressing page rendering issues, follow the steps 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 entire page, including the URL, title bar, and footer.

    2. If applicable, annotate the specific part of the page with rendering issues.

  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:

    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

    2. If 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.

    3. 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.

  5. 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.