CSS Unknown Distortions happening only on iOS in Angular Application

Question

A several month mystery has yet to be solved and I am hoping someone has seen this before and knows how to fix it. Using the Angular framework to build a PWA, I am encountering an issue with how CSS images and CSS transformations are causing distortions and apparitions which effectively means the app can't be released for iOS devices until this is corrected.

It is very inconsistent and happens randomly from one to several images at a time. It only happens within iOS. Tested and reproduced on the following devices:

iPhone 6 (iOS 12.1.4) Safari & Chrome & in PWA Standalone
iPhone 6s (iOS 12.1.4) Safari & Chrome & in PWA Standalone
iPhone 6+ (iOS 12.1.4) Safari & Chrome & in PWA Standalone
iPhone x (iOS 12.2) Safari & Chrome & in PWA Standalone
iPad Pro (iOS 12.2) Safari & Chrome & in PWA Standalone

It does not happen on any Android devices going back as far as the Galaxy S4 and the Galaxy Tab A, and as current as the Pixel 3... nor does it occur in Chrome, Safari or Firefox on desktop machines.

There are also cases where a single icon will be duplicated across the entire set of icons, like on the tab bar for instance.

<div style="background-image: url('/assets/elements/SolidCircleCheck.png');
background-position: center center; 
background-size: contain; 
background-repeat: no-repeat; 
image-rendering: crisp-edges; 
height: 3rem; width: 3rem; 
filter: brightness(2) 
drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 0.1rem); 
margin: auto;"></div>

<div class="nav-tab-section-a nav-tab-inactive">
  <img class="nav-tab-image text-no-select" src="/assets/nav/Chat.png" alt="Chat">
  <br /><span class="nav-tab-title text-no-select">Members</span>
</div>

.nav-tab-section-a {
    grid-area: nav-tab-section-a;
}
.nav-tab-active, .nav-tab-inactive {
    margin: 0 auto;
    align-content: center;
    text-align: center;
}
.nav-tab-inactive {
    -webkit-filter: brightness(110%);
    filter: brightness(110%);
}
.nav-tab-image {
    height: 3.25rem;
}
.text-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

As you can see, the problem occurs with both inline style and Style Sheet methods as well as using HTML native <img> tag and as a div background.

For a while I thought it could have been an Angular Lifecycle hooks issue where elements were being redrawn, but this has since been corrected and the images are not being re-rendered with every DOM change.

Has anyone ever encountered and solved this before?

score 0 · Answer 1 · answered Apr 06 '19 at 21:00

I would immediately suspect this to be a PNG encoding issue. Have all of your PNG assets re-saved using a different software product, and try to track down the origin of who created the PNGs and what software did they use.

You need to completely regenerate the PNG files. So I would first save to another format like TIFF and then resave again as PNG. To ensure that the image editor is forced to regenerate all of the PNG color data, headers and encoding.

You can use a free open source editor to do this:

https://www.gimp.org/

The Safari web browser has a history of distorting images. Graphic files while popular and commonly used contain a wide range of inner coding standards. While the file extension might consistently be something like PNG, JPG or TIFF. The version of the coding, format and contents can vary greatly. Using up to date image software, and making sure your PNG files are generated correctly is an important step.

References to Safari image problems:

https://discussions.apple.com/thread/6680826

https://discussions.apple.com/thread/7648947

Thanks for the response. Each icon is mastered and edited as a vector graphic in Illustrator and exported as a PNG. Originally all of the icons were SVGs which is when the problem was first encountered, thinking SVGs were the cause, they were switched for PNGs just to have the same result. I will follow up on some of your suggestions and keep digging. — SeaFuzz, Apr 06 '19 at 21:13

Rickard Elimää · Answer 2 · 2019-04-17T08:18:57.327

I started to have this issue in iOS Safari when I added filters to images. Just guessing that it could be a pixel density issue, or performance issue.

Currently looking for a solution, other than turn it off for iOS users. Here are some answers that I found that I will try out:

Why is filter(drop-shadow) causing my SVG to disappear in Safari?

Slow CSS Filters on iPhone?

The last solution will probably drain more battery, however.

CSS Unknown Distortions happening only on iOS in Angular Application

2 Answers2