We’ve had some users report that, on Safari, images were loading blurry. For the life of me, I’ve been unable to replicate the issue, but this code was able to solve the issue. Place this in your Site Footer Code Injection area. 

<!-- Fix Safari mega menu image loading -->
<script>
(function() {
 if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) return;
 function fixMegaMenuImages() {
   const megaMenuImages = document.querySelectorAll(‘[class*=“mega-menu”] .sqs-block-image img, [class*=“mega-menu”] .content-fill img’);
   megaMenuImages.forEach(img => {
     const dataSrc = img.getAttribute(‘data-src’) || img.getAttribute(‘data-image’);
     if (dataSrc) {
       // Force 1500w format
       const newSrc = dataSrc + ‘?format=1500w’;
       img.setAttribute(‘src’, newSrc);
       img.removeAttribute(‘srcset’);
       img.removeAttribute(‘sizes’);
       img.removeAttribute(‘loading’);
       img.style.opacity = ‘1’;
     }
   });
 }
 // Run multiple times to catch lazy loading
 if (document.readyState === ‘loading’) {
   document.addEventListener(‘DOMContentLoaded’, fixMegaMenuImages);
 } else {
   fixMegaMenuImages();
 }
 // Run when mega menus open
 document.addEventListener(‘click’, function(e) {
   if (e.target.closest(‘.mega-menu-link’)) {
     setTimeout(fixMegaMenuImages, 100);
     setTimeout(fixMegaMenuImages, 500);
   }
 });
 // Run after a delay for good measure
 setTimeout(fixMegaMenuImages, 1500);
})();
</script>
Previous

Change the “Back” button text on mobile folders
Next

Why is there a slight layout shift sometimes when opening a menu?