Link names are blurry / shown twice in New UX Links module

book

Article ID: 231485

calendar_today

Updated On:

Products

Clarity PPM SaaS Clarity PPM On Premise

Issue/Introduction

There is a screen corruption issue with menu links appearing blurred in the Modern User Experience (UX / MUX). Characters in links appear like double vision. This may also be noticed in other areas outside of Menus such as Custom Investment links or other modules on investments. What is causing the behavior with links not loading properly? 

Additional symptoms reported:

  • Link names are overlapped by itself
  • Links are double rendering / doubled up
  • Links duplicated on top of the original link
  • Links misaligned / jumbled
  • Links are smudged/overlapping
  • Links are unclear due to the overlayed text displayed
  • Displayed as unreadable text. 
  • The images / graphics associated with the links do not display
  • Images are not merging with the Link.

STEPS TO REPRODUCE: 

  1. Login to Clarity
  2. Navigate to New UX -> Links.
  3. Create a Link with address "https://www.google.com" and name as Google
  4. Save.

Expected Results: Link name is shown on the page.

Actual Results: Link name is overlapped and a broken image icon is also shown.

Cause

This is a defect DE63557

Reviewing the browser trace shows  CONTENT_SECURITY_POLICY validation with an error "Refused to load the image... because it violates the following Content Security Policy directive"

Environment

Release : 15.9.2, 15.9.3, 16.0.0

Component : Menu Links view, Link Module in projects, Link Module in Ideas

Browser: Chrome, Edge, Safari, Firefox

All environments (Prod, Test, Sandbox, Stage, Development)

Resolution

Fixed in 15.9.3.3 and 16.0.1

Workaround:

This is applicable until Clarity is upgraded to 16.0.1. 

PostgreSQL Only Database

  1. Stop all the Clarity services
  2. Take backup of table cmn_option_values
  3. Execute the below SQL update

    UPDATE
     cmn_option_values
    SET
     value = REPLACE(value, 'img-src ##domains## www.google.com data:;','img-src ##domains## www.google.com *.gstatic.com data:;')
    WHERE
     option_id =(
     SELECT
      id
     FROM
      cmn_options
     WHERE
      option_code = 'CONTENT_SECURITY_POLICY_HEADER')

  4. Restart all the Clarity services 

Oracle / Microsoft SQL Databases

  1. Stop all the Clarity services
  2. Take a backup of table cmn_option_values
  3. Execute the below SQL update

    update
     cmn_option_values
    set
     value = replace(value, 'img-src ##domains## www.google.com data:;','img-src ##domains## www.google.com *.gstatic.com data:;')
    where
     option_id = (
     select
      id
     from
      cmn_options
     where
      option_code = 'CONTENT_SECURITY_POLICY_HEADER')

  4. Restart all the Clarity services

Additional Information

See also Clarity frequently reported issues

Attachments