Hi all,
I’ve added the image magnification settings by following the below video from Webflow’s Youtube channel:
It seems to be working fine on Safari when I hover over the floorplans, however, I can’t seem to get the page to load in Chrome. Is there something I am missing? Here’s my read-only link:
This is the page that it’s on:
Any help with this will be greatly appreciated.
Welcome to the community @Huss_Mohamad!
I’d imagine the issue is due to how Chrome is handling SVG data compared to Safari. My M1 MacBook Pro struggles quite a bit even checking the Network tab in Chrome’s DevTools with what looks like hundreds of individual SVG calls but Safari seems to handle things fairly well with maybe half a dozen or so.
I’d recommend using compressed PNG files (through a service like TinyPNG) rather than SVGs as you’d get a similar file size and I’d imagine it’d fix the issue with rendering differently across browsers.
Thanks for the advice @mikeyevin, I’ve run jpeg files through TinyPNG and have replaced all the floorplans with no success. I’m still getting a blank page on the screen. Is there anything else you would recommend I do?
There is definitely something strange going on, the site never even finishes “loading” in Chrome—I get a white screen with a loading icon until I manually cancel it, then the page appears, but it continues to download infinite JPG files:
After a bit of poking around in the code, it looks like a JS file is the culprit—which hangs the site during the initial loading (where I’m getting a white screen) and then causes the excessive JPG file requests:
I’m not too sure why Chrome specifically has an issue with that (Safari and Firefox on MacOS handle it just fine) but it was definitely that specific JS file from Typekit and not anything to do with the previous SVG usage.
That said, I’d still argue that complex SVGs—while smaller in file size—can cause performance issues compared to high quality PNG files (which I’d use over JPGs in this case). Obviously it’s not fixing the root issue, but hopefully you’ve got a better idea how you can troubleshoot it.
Hi @mikeyevin, thanks for taking the time to do a bit of research on this, I really appreciate your help. It’s definitely something that I cannot seem to get my head around. Do you think I need to add a script to stop the page from loading after a certain point? Or, should all the images on the page be set to ‘Default’, rather than ‘lazy load’. What do you think?
I’d first just try removing your Typekit JS file (as that seems to be the culprit) and see if you get a better result. If that works, then you know where you can focus your research into known issues or workarounds. Based on what I saw, that’s what I’d put my money on.
What font is it you’re trying to use from Typekit by chance? I’d be happy to whip up a project using the same font myself to see if I can reproduce the issue.
Hey @mikeyevin, you were right. Typekit was the culprit! I’ve managed to remove the API token from the Fonts tab in Project Settings and it worked. Thank you so much!!!
