Icon in header is blurred on iOS devices (iPad / iPhone)

Error Description

Header Icon on iOS devices that share the header with other elements appear blurred. This effect appears only on iOS devices, Android devices or desktop browser do not show this behaviour.


The pyCaseHeader consists of a dynamic layout with an icon and a text property in it. The dynamic layout 1.1 is set to  "Other / Inline Middle". The presentation layout mode set to “Inline-Block”. 

Suggested Approach

Set presentation layout mode of dynamic layout 1.1. to “Flexbox” and set the presentation layout-mode of all child properties to "Inline-Block". Now it works fine with Safari. 

***Updated by Moderator: Marissa to change post type from Question to Discussion***

**Moderation Team has archived post**

This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.


Keep up to date on this post and subscribe to comments

August 19, 2016 - 4:08am

Hi Bjorn,

Thank you for sharing this helpful approach on our community!

Lochan  |  Community Moderator  |  Pegasystems Inc.

Lochana | Community Moderator | Pegasystems Inc.

October 27, 2016 - 7:05am

Hi Björn, 

my first approach would have been to ask you to check the image size


second approach would be to ask if you are using a vector image:  .png vs .svg. 

.png would look blurred in iOS devices (also in OSX, or android/Windows devices using a retina display) because of the pixel density, the image has to expand to accomodate a bigger amount of pixels, so it looks the same as when you use a too small of an image and set the size to be bigger with (html or css) code.

i cannot imagine how the flexbox helped. Interesting!