CODEWITHSUNDEEP
ioscordovasvgios11
Sven Kannenberg
Sven Kannenberg

Reputation: 869

Gray images are being rendered distorted in cordova-based app

After updating an iPad to iOS 11 a customer noticed that some SVG files are being rendered distorted sometimes. It appears that this only happens, if another rendering operation is being performed and this element overlays the SVG files.

enter image description here

Has anyone else had this problem yet and has a solution? It would be great to keep the SVG files. Prior iOS 11 and on Android I've never had that problem.

After some tests I'm certain this happens only to gray images. Regardless of being an SVG or PNG.

It seems that sometimes it even renders the wrong image.

How it should look like:

How it should look like

After creating a dialog:

After creating a dialog

After destroying the dialog:

After destroying the dialog

Upvotes: 1

Views: 213

Answers (1)

Sven Kannenberg
Sven Kannenberg

Reputation: 869

I've solved my problem. It has been caused by this CSS class:

.desaturate {
    opacity: 0.5;
    filter: gray;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Upvotes: 1

Related Questions