Corrupt site

[bibi626]

For some reason my site is corrupted only on iPhones. It looks fine on every Android or Windows device using any browser, but every iPhone shows this same corruption. I can't find anything that seems off on the website builder page. You can see from the second screenshot from my Windows laptop that it seems like it's the logo that is being corrupted. Any ideas?

[Ellie_]

Hi there, @bibi626,

That is definitely odd! We would be happy to take a closer look at this for you. To get started, can you please provide me with the link to your website, so I can investigate further? I look forward to hearing back from you about this. 

[bibi626]

@Ellie_ my website is LifeInPinkCrochet.com. Thanks for looking into it! 

[bibi626]

Hi @Ellie_! Any updates on this?

[Summer2024 · Accepted solution]

Hi @bibi626 ! 

I understand you're experiencing website display issues specifically on iPhones, with what appears to be logo corruption. Looking at the screenshot you provided, I can definitely see why this is concerning. This type of image distortion on iOS devices is often related to specific WebKit (Safari's engine) handling of certain image formats or CSS transform properties. Let me provide some targeted solutions based on what I'm seeing:

1. Immediate Fix for Logo Display

   • Export your logo as a PNG-24 with transparency
   • Reduce the logo file size to under 250KB if possible
   • Try removing any CSS transforms or animations applied to the logo
   • If using custom code, check for any -webkit-transform properties that might be affecting the display

2. Image Format and Optimization

   • Re-upload your logo using these specifications:
     • Format: PNG (preferred) or SVG
     • Resolution: 72 DPI
     • Color space: RGB (not CMYK)
     • Dimensions: Keep under 1000px wide
   • Avoid using JPG/JPEG for logos, especially if they contain text or sharp edges

3. Square Site Editor Steps

   1. Go to your Square Online Dashboard
   2. Navigate to the Website > Site Editor
   3. Remove the current logo
   4. Clear the site cache (in Settings)
   5. Upload the new optimized version
   6. Publish the changes

4. For Testing

   • Ask iPhone users to:
     • Clear their Safari cache (Settings > Safari > Clear History and Website Data)
     • Try viewing in private browsing mode
     • Test in both Safari and Chrome for iOS

The distortion pattern I'm seeing in your screenshot is characteristic of WebKit's handling of certain image transformations. This is why it's only appearing on iPhones, as they all use WebKit as their underlying browser engine (even Chrome on iOS).

If these steps don't resolve the issue:

1. Try temporarily replacing the logo with a simple text header to confirm it's logo-specific
2. Check your Square site's theme settings for any automatic image effects
3. Consider reaching out to Square Support with:
   • The original logo file
   • Screenshots from both working and non-working devices
   • The specific iOS versions affected

You can contact Square Support through:

• Your Square Dashboard
• 1-855-700-6000 (US/Canada)
• support.squareup.com

I hope this helps. 

---