Background:
I'm creating my navigation bar for my portfolio in codepen.io
I've notice that everything works excellently in chrome; however, when testing the pen in firefox, after click of a li item of a navigation. The page errors out by filling the screen with white. I noticed a similar problem with this in other pens.
Reference Example:
return false example from a previous stack question
The remedy was in the js return false had to be present.
Question:
This example is different because I'm not using any javascript. Only html and css.
Why does firefox have this consistent problem in codepen? What do I need to know to understand why this problem occurs so that in future coding I can be knowledgeable of this firefox caveat entirely? Lastly, why doesn't this happen in chrome?
codepen example
After checking out your codepen, it's clear it's nothing to do with your code.
I've done a search and found this question which seems like a very bug to the one you've come across. Looks like there's already a BugZilla ticket open for this issue, but as of yet it's unresolved.
Related
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
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.
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.
http://jsfiddle.net/4t6j5/2/ (this seems to be working normally)
http://www.periferi.nu/#filter=.utstallningar (this does not)
Se the jsFiddle where I have tried to reproduce the error using the parts that are erroneous.
So the problem is that in IE8 and down the read more element starts jumping a whole lot instead of simply sliding in from below when the mouse is over the image. Works perfect in most modern browsers but in IE8 and down it starts jumping (especially when hovering the p elements, for some reason).
It appears that when the code from that part is isolated it works.
Why does it behave differently in IE? Any help is appreciated!
Ok after endless hours I have captured the bug in my css file. Strange case but thanks WTK for the direction. Turns out:
html {overflow-y:scroll;}
Was the main problem for some for me unknown reason.
If someone sits on further information as of why this happens in IE please share.
http://jsfiddle.net/4t6j5/3/ (Bug hunting fiddle)
I am working on a site: http://deel.io
When the page loads, there is a half-second or so white flash that appears on the screen.
The white flash goes away if I comment out the line of code that puts the markers on the map:
markersArray[i].setMap(map);
Yet this flash has only just started appearing, so it must be some other code that is causing the above code now to cause the flash.
I realize this is impossibly difficult to help with unless you've seen it before. That's what I'm hoping for--that someone had this exact thing happen to them and knows right away what I am probably doing wrong.
My code is basically all JS/jQuery.
Please see edit below.
I reproduced the problem using Chrome once, every other time after that I couldn't see the white flash. Even with different browsers.
Your probably going to have backtrack all your changes until the problem goes away to see what you introduced that's causing the problem. Hopefully you've been using source control.
I hope you get more replies - although this is a very specific issue that I could only repro once.