Safari heavily distorted image

Question

Safari heavily distorted image

I'm experiencing weird image distortion with a single image on a single website in Safari. I haven't been able to reproduce it with other browsers or other images, but it doesn't happen very often, so I'm not sure whether it's only Safari.

The website is www.laurensdressuur.be .

I had my laptop repaired last month for the typical MacBook Pro GPU problems, and I hoped that would solve this as well. Clearly it didn't. I'm just wondering what causes this. Is it software or hardware?

MacBook Pro with Retina display, OS X El Capitan (10.11.6)

Posted on Aug 27, 2016 12:12 PM

Reply

Answer 1

Best reply

dominic23

Level 10

83,916 points

Aug 27, 2016 12:28 PM in response to Rugen Heidbuchel

If only one particular site is affected, it may be a software issue.

If you have not done this already, go step by step and test.

1. Empty Caches

Safari > Preference > Advanced

Checkmark the box beside "Show Develop menu in menu bar".

Develop menu will appear in the Safari menu bar.

Click Develop and select "Empty Caches" from the dropdown.

2. Remove Cookies and test.

Safari > Preferences > Privacy > Cookies and other website data:

Click the “Details” button.

Remove all cookies except ones from Apple, your internet service provider and banks.

3. Disable Extensions and test.

Safari > Preferences > Extensions

Select and disable all extensions and test.

Enable Extensions one by one and test.

To uninstall any extension, select it and click the “Uninstall” button.

Reply

Answer 2

Aug 27, 2016 12:30 PM in response to dominic23

I've already emptied and disabled the caches, but that didn't work. I removed the cookies now, so I can see whether the problem returns. Extensions can't be the problem, because I only have one, and I had the problem already before I had the extension.

Thanks a lot for your help! 🙂

Reply

Answer 3

Aug 27, 2016 1:10 PM in response to Rugen Heidbuchel

a single image on a single website

Seems like an isolated event. A none issue on your side.

Reply

Answer 4

Aug 27, 2016 9:56 PM in response to leroydouglas

Indeed, but I have no idea what it might be. The weird thing is that it shows up normally most of the time. Also: once it's scrambled, reloading doesn't fix it. Reloading does scramble it again, so it doesn't look like it's cached. I haven't been able to identify what might stop the scrambling, maybe just sleep?

Reply

Answer 5

Aug 29, 2016 3:09 AM in response to dominic23

@dominic23: I just had the problem again. I tried deleting the site's cookies, but that didn't work.

Reply

Answer 6

Aug 29, 2016 3:10 AM in response to leroydouglas

@leroydouglas: Do you have any idea what might cause this in an image?

Reply

Answer 7

Aug 29, 2016 8:09 AM in response to Rugen Heidbuchel

Rugen Heidbuchel wrote:

@leroydouglas: Do you have any idea what might cause this in an image?

A poorly designed/coded web site.

Reply

Answer 8

Aug 29, 2016 11:57 AM in response to BobTheFisherman

@BobTheFisherman: I made the website myself... 😝 But I'ld be happy if I can change it in code, because that would mean there's no problem with my laptop. It would also be very good to know for other sites I would make.

I used the following css for the background image:

background-image: url('http://www.laurensdressuur.be/wp-content/themes/laurensdressuur/images/menu-back grounds/bianca-cropped.jpeg');

Reply

Answer 9

Aug 29, 2016 3:10 PM in response to Rugen Heidbuchel

How does this image appear using a different browser? As you would like it to be?

The image looks fine on both my FF & Safari on my MBP and on iOS.

232 style="background-image: url('http://www.laurensdressuur.be/wp-content/themes/laurensdressuur/images/men u-backgrounds/bianca-cropped.jpeg');">

The image is only 474 KB that should not be an issue.

Reply

Answer 10

Aug 29, 2016 3:15 PM in response to Rugen Heidbuchel

My only suggestion would be to try and change the image format— like .png

And see if that makes a difference in how it renders.

Reply

Answer 11

Aug 29, 2016 5:53 PM in response to Rugen Heidbuchel

What size is the image? Is it being stretched to fill the background?

Reply

Answer 12

Aug 29, 2016 5:55 PM in response to Rugen Heidbuchel

Size is 1921px x 1414px it is not pixelated it is ripped.

Reply

Answer 13

Aug 30, 2016 2:55 PM in response to leroydouglas

Normally it renders ok with me too. I think I get the ripped version about once in 2 to 3 days. I'll try to change the image format and see whether the problems still returns then... @BobTheFisherman: Like leroydouglas said, the image is not stretched. I really don't know what could possibly be wrong with simple background-image css...

By the way, thanks a lot for your help guys! 🙂

Reply

Answer 14

John Galt

Level 10

141,640 points

Aug 30, 2016 3:44 PM in response to Rugen Heidbuchel

Rugen Heidbuchel wrote:

Is it software or hardware?

Either one is possible. Please read and follow the instructions in If Safari doesn't load a page or webpage items are missing - Apple Support.

From the picture of your Mac's menu extra area, there appear to be quite a few non-Apple system modifications present. Try booting "Safe Mode" to determine if one or more of them might be contributing to Safari's graphical anomalies: Try safe mode if your Mac doesn't finish starting up - Apple Support.

Reply

Answer 15

Aug 31, 2016 12:25 AM in response to John Galt

@John Galt: I already tried all things from the safari support page. Booting in safe mode is a good idea, so I'll definitely try that if changing the picture extension doesn't work. The only 'problem' is that I'll have to remain is safe mode for a long time, since the ripped picture only happens once in 2 to 3 days...

Reply