A page not rendering correctly may refer to three broad categories:
Incomplete Or Delayed Page Load
The page ‘hangs’ or 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.
Layout Distortion
Page elements load, but the layout appears distorted, with misaligned, overlapping, or skewed page elements.
Non-Functional Features or Functions
The page loads successfully, but interactive elements, such as buttons or links, do not respond when clicked.
When addressing page rendering issues, follow the items below to gather the relevant information.
Describe the Issue and Reproduction Steps:
Provide a detailed description of the rendering issue, including any specific actions or steps needed to reproduce it.
Capture a Screenshot of the Page
Include the relevant area or element where the rendering issue occurs.
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.
Use the Developer Console to Identify Errors:
Open the browser's developer console to inspect and identify any possible errors related to the rendering issue.
Take a screenshot of the browser console, look for red text indicating an error
Take a screenshot of the browser console, focusing on any error messages or red text that indicates an issue.
Copy the Browser Console Text:
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 it.
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.