Discussion
Capgemini Deutschland GmbH
DE
Last activity: 27 Oct 2016 7:05 EDT
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.
Configuration
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***
Pegasystems Inc.
IN
Hi Bjorn,
Thank you for sharing this helpful approach on our community!
Regards,
Lochan | Community Moderator | Pegasystems Inc.
Atos Information Technology GmbH
DE
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!