Safari Issue w/ Phoenix + Modern + Portlet

book

Article ID: 242804

calendar_today

Updated On:

Products

Clarity PPM On Premise

Issue/Introduction

We have the Phoenix UI in Classic to channel back to portlets more elegantly in the modern UX. 
Safari is not playing nice with the portlets. 
The filters and buttons are not actionable. It works fine in Chrome.  

Steps to Reproduce: 

  1. Login to Modern UX using the Safari Browser on an environment where the Classic UI is using the Phoenix UI Theme 
  2. Create or Edit a Project Blueprint 
  3. Add a Channel Module 
    • Use this URL to a Classic page for testing (but this happens with other URLs also)
    • http://clarity-hostname/niku/nu#action:copProgramDashboard&frame_id=502 
  4. Publish the Blueprint 
  5. Open the Projects grid layout, add Blueprint column 
  6. Modify a Project in the grid to use that Blueprint name 
  7. Open the Project and go to the Clarity Channel that was created 

Expected Results: iframe displays without white space. 

Actual Results: iframe shows white space on the left margin when browser is resized. 

Cause

DE65282

  • Problem does not happen in other web browsers, like Chrome. 
  • The problem is present with the CSS element called `ppm-channel-iframe` defined in `ppm-lib-47613c4d85.min.css` (non minified file ppm-lib-47613c4d85.css). 
  • It has a CSS directive called `object-fit` with it’s value set to `contain`.
  • WebKit does the right thing of resizing it with the changing dimensions of the parent element. Which we believe is correct according to spec. 
  • When we remove that CSS element, we get correct behavior for Safari.
  • We’ve tested this on Safari and on Chrome, and have been able to get consistent results successfully. 
  • Chrome just ignores the `object-fit` error. 

Workaround: Use an alternative Browser or remove the CSS element 'object-fit' from the CSS file. 

Environment

Release : 16.0.2

Component : Clarity MUX UI Usability

Resolution

  • Targeted Fix in Release 16.0.3 
  • Targeted Fix in Release 16.0.2 Patch #1 (16.0.2.1) 

Additional Information