Image Slider Problems with Google Chrome - html

I made a site..
And It has an Awesome Bootstrap Slider in it
the Problem with it is...
SLIDER sometimes doesn't loads up ONLY on Google Chrome (PC)
After few refreshes it does.. But on Other Browsers it's all good..
My site
I tried Re framing CSS and Adding some Liberarys etc, still doesnt work

Related

Font Awesome Icons Behave Like Schrödinger's Cat on Mobile

I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.

Website does not render correctly on mobile browser(s) after upload to server

I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.

Can't click anywhere on my website from iPhone

I have one problem with my web site, if i open the website from any android device, everything is fine and the page work normal. But if i open the web site from my iPhone or any other iPhone (didn't try with other ios devices) i see the webpage, but i can't click anywhere. Can't click on links, button, input fields, images, can't select text or any other content in the page. It's like the page is one big image and can't do nothing there. I try with different browsers (safari, mozilla, chrome) from the iPhone and it's all the same. I don't know what to search exactly... If you need HTML or CSS code i can give you, but i have no idea where to start looking/fixing this problem or what cause it.

CSS-only image slider problems on safari

I have a CSS-only image slider on my website. It works perfectly except on Safari tablet/mobile devices. It's very strange though because the slider just doesn't work on these mobile devices when you go to the slider page directly from my homepage. (If you refresh the page, of if you go directly to the slider page without going to the home page first, it works on these devices in Safari). I have no idea how to fix this, if someone could help please let me know!
Here is the link to my website:
http://averyeliasdesign.com
If you scroll down to the "Work" section and click on one of the work samples, it will take you to the page with the slider.
The link to the slider page is:
http://averyeliasdesign.com/work1.html
If you click on this direct link from your phone, the slider will work. It just doesn't work when you go to the slider page from my homepage.
It is working on my iOS 8.4 device (5th generation iPod touch).

Google Chrome grey screen problem

Iam a web-developer and recently i have completed and launched a website (im using a CMS joomla for this website with php) and it is working fine in firefox and IE but when iam trying to view it in Chrome it is having a strange problem
for the first two seconds the contents of the website are visible but after that the whole website is greying out and iam not able to view anything on the website. This is happening for the first and even i tried to find the solution on the forums but to no avail......any help will be much appreciated.
Note : I have implemented a video on the home page of the website only that video box and the video playing inside that box is viewable but rest of the page is complete grey.
#chris, abraham, moose thankyou all for trying to help..the problem is solved now, i debugged the code and found out that there was a image in the footer which was creating this problem after i removed that image everything is working fine and perfect now