So I've been working on a website, and the main focus of the site is a javascript-driven 3D carousel, and I got the code for the carousel from here: https://github.com/kaizouman/3dcarousel
I integrated the code into my site, and only modified the number of carousel items and the size of each item. I left the rest of the code untouched (demo.js and 3dcarousel.js). It works perfectly, but only most of the time. I've noticed that it'll work perfectly in Chrome about 90% of the time, in Safari about 80% of the time, and in Microsoft Edge & IE, it pretty much never works. When it doesn't work, it just loads each image individually. When it happens in Chrome, if I keep refreshing the page, it'll eventually work properly. Also interestingly, when I navigate to another page in Chrome and then hit the back button, the carousel will always fail to load.
Here's what it looks like in Microsoft Edge and also when it fails to load in Chrome:
And here's what it looks like when it loads properly:
I can't for the life of me begin to figure out why this is happening, does anyone have any idea? The website is located at http://lipocircuit.com/new.html.
WOW this was a simple fix, I just commented out the line that includes the prefixfree.min.js script, I guess that's outdated and not needed anymore. I feel dumb but I'll leave this up in case anyone else has this issue.
Related
We have gotten some reports and also experienced this ourselves that on random occasions (maybe every third or fourth request) on our "apps pages" the page just becomes extremely long and the "footer" isn't loaded.
So for example on https://alternativeto.net/software/adobe-photoshop/ if you refresh that page a couple of time or go to any other "apps-page" this should happen.
The strange thing is that as soon as i open the inspector everything goes back to normal. Also if i have the inspector open everything works fine (but you can see the scrollbar jumping quickly as the problem appears but goes back again).
I have experienced this both with a Firefox with add-ons but also on a clean profile.
I suppose this is some bug with Firefox in combination with something in our code in the page.
Can anybody maybe point me in the right direction here? I have tried
I have an owl.carousel on my website displaying testimonials. I didn't have any issues with this until about a month or two ago. I have no idea what happened that now I have this problem but i'll try to explain as best as I can.
I'm getting two different views of the carousel on the firefox and chrome. On firefox, it looks perfectly fine and displays correctly. On chrome how ever, it seems like after the browser cashes the page, the carousel decides to align all the text to the right (I know this is confusing so ill put picture in so you guys can see). The reason I say after it cashes the page is because, when I load the page with no cashe on chrome, it looks perfectly fine as it does on firefox, but as soon as I go to another page and then come back or refresh the page, the carousel all shifts to the right.
Here is what it looks like on chrome:
https://gyazo.com/2466dc69c470851122693d622975c018 --> Chrome
Here is also a link to the website for who ever that wants to read the code them selves (scroll down the home page and you will see the testimonials section):
http://ecocertificates.com.au
Any help would be greatly appreciated guys!
Thanks in advance :)
I am currently working on a website that is still pretty simple.
You can click on ingredients and it shows you possible meals you could make with the selected ingredients.
While the site is working as intended on PC (tested on two different PCs), the page is loading infinitely on mobile (tested on android: chrome and firefox).
If I exclude my app.js file, the site is loading normally, so I guess the problem is somewhere in there.
The code is rather long (over 250 lines) so I don't know how I should upload it.
I googled my problem but found nothing so far, would be great if anybody could help.
If anyone has the same problem:
I was able to find the problem after some additional debugging.
There was a problem in the calculation of the element's locations in js.
If the width of my parent div falls below a specific value, the script is rounding down to 0 and is trying to divide by 0 in the next line.
I am still confused because usually js is responding with an error to division by 0, but at least it works now..
I am working on this site "http://tinyurl.com/joblnmd". On home page there'gif animation, I've used preload method to load images, its working on all major browsers expect safari on Mac.
Is this bug in safari or is there any hack?
New Post: I've looked at the site again and there doesn't seem to be any problems. The loading hourglass appears for a long time, but it eventually disappears and the main content of the page is visible. It might be best for your to provide a JSFiddle with just the area in question so that I, or someone else, can have a proper look and help you solve your problem.
Old Post: Maybe you need to update your browser. My Mac Safari appears to show everything perfectly. But I'll check again later tonight. The animation looks very nice.
Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.