Addressing CSS Rendering Inconsistencies in Branding Customizations

Products

• CA Identity Manager
• CA Identity Governance
• CA Identity Portal

Issue/Introduction

When applying custom CSS to the Identity Provider (IdP) branding, users may observe differences in how elements render across browsers (e.g., Internet Explorer vs. Google Chrome). This article explains why these inconsistencies occur and provides recommendations for troubleshooting.

Environment

• Product: Identity Portal
• Component: Branding and UI Customization
• 14.x, 15.x

Cause

Identity Portal injects custom CSS rules provided in the administration UI directly into the rendered HTML pages. Once these styles are applied, the browser is responsible for interpreting and rendering the content.

Different web browsers utilize unique rendering engines (e.g., Trident, Blink, WebKit), which may interpret CSS rules differently. Consequently, a style that renders correctly in a Chromium-based browser may behave differently in Internet Explorer.

Resolution

Working as design. The CSS rules added in the admin UI are injected onto the sigma HTML pages. Rendering rules are browser specific.

1. Inspect Elements: Use the browser's developer tools (F12) to inspect the specific elements that are rendering incorrectly.
2. Verify CSS Compatibility: Ensure that your custom CSS rules are compatible with the browser versions in use. Use CSS validator tools to check for errors or deprecated syntax.
3. Apply Vendor Prefixes: Check if the affected CSS properties require vendor prefixes (e.g., -ms-, -webkit-) to ensure cross-browser support.
4. Isolate Styles: Test the styles in an isolated environment to determine if the issue is caused by a specific rule or a global CSS conflict.

 

Additional Information

For more information on web standards and CSS compatibility, refer to the MDN Web Docs.

To speak with a customer representative or a Support Engineer, see Contact Support. Scroll to the bottom of the page and click on your respective region for the appropriate contact details.