Image carousel slow to load once hosted - javascript

I built a pretty simple website for a friend that is essentially an online brochure for a property listing and experiencing a bug. The site was built using just basic HTML/CSS/JS.
The bug is once I hosted the site, the image carousel is extremely slow to load only on Apple products and takes me reloading the page once after initially visiting the page to fix the lag. On Android and windows products it works fine.. Here is the link to visit to see what I mean:
http://armanicondoforsale.com/
Also for reference is my code here:
https://github.com/JenniferJGomez/Armani
Wondering if this is a performance issue or perhaps a bug only Apple products experience?

Related

What can cause chrome to display a web page all smudged and how to troubleshoot? (image included)

What could cause Chrome on mobile to display a web page appears to smudge elements when scrolling the page, such as the below image.
The page uses many icons from Fontawesome and uses Google fonts (font source NPM package), reactjs, jQuery and is packaged using webpack. It includes multiple webpack bundles on the same page.
What could be the approach to troubleshoot this issue?
The example below is at URL https://uquiz.com/DlVmXD:
The issue appears to have surfaced with the inclusion of the additional react component further down the page that shows suggestions of other content. Apparently it doesn't happen when the suggestions aren't displayed such as on this embed URL of the same content: https://uquiz.com/quiz/embed/DlVmXD/what-romance-trope-are-you?embed=true
I have tried it on many devices and it is fine and thousands of people are successfully able to use the page without issue every single day, but many people are reporting this issue. Every person that I have investigated is using Chrome on a mobile device.
I can't find anything to do with this behviour on the githubs for the main libraries that I use so I'm left thinking it could be a hardware issue. Could it be?

Javascript and CSS not working after uploading the website online but they are working fine locally

Here is the site in question http://www.rfindings.net/
I have uploaded the code to github - https://github.com/Shaivik7/rfindings
Now the home page has 2 images that should be switching every 4 secs which is not happening online but working fine offline.
If you see any missing semicolons I have fixed them and tried again but nothing changes.
And for CSS part I have wrote the media query according to resized browser but the site looks completely different on mobile, I used media query for anything less than 768px but still on mobile it looks completely different.
I am beginner so I hope my code isn't too messy if it is I apologize in advance.
I am hosting this site at namecheap
If you have to time please take a look.. Thanks

Trouble with Facebook in app browser, rest of the browsers working perfectly fine

First a little context. I'm a designer from the Netherlands with a love for code. I can find my way pretty ok in html and css and a little bit in php and javascript. I love the Stack Overflow community, it helped me so much and it still helps me every day in becoming a little bit better at coding!
I have never asked a question here at S.O. before, because I always found a way to solve problems, untill now. I literally tried everything and I really hope you guys can help me.
I have a hobby project: https://unboxguide.com
It is some kind of TripAdvisor for CrossFit Boxes (gym boxes).
It is a Wordpress website which uses several different plugins for some functionalities.
The site works perfect on desktop browsers like Chrome, Safari, Firefox, etc. No problem there.
Then on mobile, still no problem there. On Android with chrome, it works perfect, on iPhone with Safari, still shiny.
But then.... the horror starts.
The Facebook in-app browser. There is something completely weird there. If I post a link to the website on Facebook and you click on it in the Facebook app it will open the Facebook in-app browser. The website renders completely randomly. Sometimes it doesn't load fonts, or any of the layout (css). Sometimes it doesn't even load the images.
Some research taught me that it is some kind of webview of the internal Mobile OS browser. So on iPhone a webview of Safari and Android a webview of Chrome.
I tested the Facebook links on Android, no problems there. The problem only occurs in the Facebook app on iPhone.
If you want to see for yourself, post https://unboxguide.com on your Facebook (just do it privately, so only you can see it) and keep refreshing it. The more you refresh, the more random results you will get. It's so strange.
I've tried so many things: rebuild the whole CSS, killed all plugins, tried different themes and tried to build everything from scratch. I also tried different backups from a few months ago where (I thought) the problem didn't occur yet. Nothing helped.
I really really hope someone has had the same issue or understands the problem, and can help or point me in the right direction.
Thanks in advance!
PS: If anything is needed furthermore to help you guys figure out what the problem can be, please let me know and I can post more information.
Old question, late answer. If your website uses ajax and uses X-Requested-With header to detect ajax requests (or not) this could be the reason. Webviews most of time use the X-Requested-With header for something else, so your pages are displayed like Ajax results (without css, javascript etc) and not like full html page.
Hope this helps.

Facebook in-app browser cuts off top of webpage

When clicking a website link from within the Facebook iOS app, the page loads fine (within the in-app browser). But then when you scroll down and then back up, the top is cut off. This is a problem for website with a nav bar at the top, like amazon.com. Is there a workaround for this? One that does not involve the user having to disable the in-app browser. This is aweful when you realize you've spent money sending people to a website they cannot use.
Update: This seems to be an issue with a slightly older version of the Facebook App for iOS. In the newer version of the FB App, this is not a problem.
Even still, I'd like to know if anyone has experienced this and if so, is there an HTML, javascript or jquery solution to the problem. I know I can detect the FB browser, maybe even the version of the in-app browser. But still, what to do then.
I think I am going to try using frames. I guess I could pad the top and bottom.enter image description here

Sudden JavaScript issues on Joomla 2.5 Website

I have a website using Joomla 2.5 and a high number of Plugins and components. I did not change a thing, but since this morning the following happens: The page is rendered fine, and after some seconds delay the page disappears and only one (or several, if available) banner of that page remain. This only happens with javascripted banner items, not with regular image banners. Pages with more than only one banner collapse and show all these banners (without the rest of the page).
What could potentially cause that error, and where to look for rectification?
Thanks for any idea anyone may have.
Ralph
Example:
enter link description here
The problem was solved by the programmers of the main site software JReviews, they "reverted a change that was made to a slider to fix an issue with jQuery 1.11 which is loaded by the latest Joomla 3.2."
I hope this explanation is helpful for the StackExchange forum, and also sufficient, as I do not have further details of the error rectification that was done remotely. Should I get any further details, I will surely post it here.

Categories