Chrome & Firefox browser render bootstrap CSS different

[Shinni]

Instead of showing the correct image, it shows the wrong images in other browsers, including desktop browser Chrome, Firefox, mobile browser Safari, Chrome. The browser can’t read the image link properly, may I have a way to solve it. check the photo I’ve attached. Thanks.

[FlantasticDan]

So the tricky thing with web browsers on iOS devices is that while the user may believe they are using different browsers, they’re all just a different wrapper around Apple’s Safari browser. The Google Chrome on iOS is not the Google Chrome on an android device or a desktop computer. This is because of Apple’s App Store Guidelines:

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript

In essence, if it works in Safari, it’ll work in all other iOS browsers.

That said, I’ve opened this page in simulated versions of both iOS Safari and Chrome on Android as well as desktop Safari and desktop Firefox and they’re all pretty identical so far as I can tell:

^{from left to right: Desktop Safari, Chrome on Android, iOS Safari, Desktop Firefox}

It looks like you’re styling isn’t responsive, rather opting to style for an absolute size but I’m not sure that’s the issue you’re referring to…

Could you be more specific as to which browser isn’t reading which image link correctly?

[Shinni]

Hi FlantasticDan, thanks for reply!

For my site, Safari on IOS and Chrome on desktop is displaying well. If using other browser the problem will come out. Do you know any code or ways to solve this problem?

This is the outcome I wanted, but somehow it detects the wrong image link that you see on your phone

[FlantasticDan]

I went through your project’s git commit history and it looks like that at commit 7143a71808816092888ec8db2eb8256cfe2aabcb the Glitch CDN Asset with filename Asset 73.png had it’s UUID change which to me indicates the file was replaced with a new version. The Glitch editor automatically replaces a file in the CDN if a new file with the same name is updated.

I’m thinking you replaced the text based image with the icon it is now and whatever browser appears to be working for you has cached the old version.

As far as I’m aware the Glitch CDN doesn’t have backup so you’ll either need to re-replace Asset 73.png with the correct image or upload the text image with a new file name and update your html with the new link.

[Shinni]

Thanks for the reply!