Slick: Low res slides on Apple products

[fatmarker]

Images and text appear blurry on iOS (tested on iPhone 5s, iPhone 6, iPad 4). This only seems to be an issue on iOS versions 10 and below.

https://jsfiddle.net/fatmarker/kpczLmsu/
https://codepen.io/fatmarker/pen/xWwQNd

The Fiddle/CodePen reproduces the slider as is on the desktop version of our site. But I can't get either to load on a mobile device, therefore I will share the website link so you can see the behavior yourself: https://www.quadrousa.com

Behavior

iPhone 6 (iOS 9.3.3)
Safari/Chrome, if you pinch to zoom just a little and go back out, everything re-renders as high res. If you zoom in a lot, the text and image distort greatly, and zooming out inconsistently re-renders to high res.

iPad 4 (iOS 10.3.3)
Safari/Chrome/Firefox, everything is blurry, and zooming doesn't re-render.

iPhone 5s (iOS 11.2.6)
The first image looks blurry, but all text and following images look sharp.

Microsoft Lumia 550
Everything looks sharp as expected.

More Details

• jQuery 3.2.1
• Slick 1.8.1

UPDATE:

This is also happening in Safari 11.0.3 on macOS 10.13.3, but not in Firefox or Chrome.

[fatmarker]

Could some Apple/Safari user at least verify that this is also happening to them? Thank you.

[GreenSunBear]

Same here.
On iOS the image resolution is low.
@fatmarker Have you tested with the latest Slick.js version?

[fatmarker]

@GreenSunBear Thanks for confirming that you also experience it. I just updated to 1.9.0 and the problem still exists.

[GreenSunBear]

I can see that on Apple devices both Safari and Chrome treats the slider width ( basically the element that holds the images ) as one large image and thus lower the resolution.
Following the info here we can understand the logic.
In my tests I lowered the image slide width and reduced the number of images to achieve a lower total width of the slider element results in high quality slider images.
So yes, Apple devices treats the entire slider total width to calculate if the image resolution needs to be low.
How can we tell Apple that this is a slider element with multiple images?

[fatmarker]

I went over my CSS one more time and discovered the problem. I followed advice from Issue 1890: Slide blinks at the end of infinite-rotation-transition. Applying perspective: 1000; to .slick-slide is what caused the low-res effect in the Apple family.