Low Image Quality In Safari, Jssor Slider Is Used

I have used jssor slider on my website which works fine in all browsers except safari, in safari images are little blur. My image size is bigger than slider Div, image size is (120

Solution 1:

Add this to your list of slider options:

$HWA: false

HWA is HardWare Acceleration, according to the JSSOR reference - link

I discovered this option via another S.O. post from JSSOR in response to someone who wanted to prevent "-webkit-transform: perspective(2000);" being injected into their code, which it does. It may, therefore, affect 3D transitions (untested).

It appears that setting $HWA: false also disables image resampling, thus allowing your Retina-compatible images to show correctly.

Solution 2:

Please set slider container size close to image size. If you set the container size to 1200 to 800, it should look better.

As your slider is responsible, it scales to larger size sometimes.

For some reason, there is a bit problem on safari in following case.

Assuming that you have image at size (1800 x 1200), and your slider size is (900 x 600), and your slider is responsive, it will resize to (1800 x 1200) to fit your screen.

That's to say, your image resizes from (1800 x 1200) to (900 x 600), and then to (1800 x 1200) again. You will see image blur on safari.

The reason is that the quality lose when a larger image fit a smaller container. And when you scale it to larger size, the quality should look a bit worse.