search cancel

Safari Issue w/ Phoenix + Modern + Portlet


Article ID: 242804


Updated On:


Clarity PPM On Premise


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. 


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


Release : 16.0.2


DE65282, fixed in 16.0.3 and

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

Additional Information