There is an issue with the hover effect that only appears on Safari 10.0.
The web is this:
Manu Caballero
What is happening is that the effect is working radomly, or not working at all:
To see it working, you can use Chrome or Firefox.
The most strange thing is that, on Safari 10.0, if I try to use the inspector, the hover effect works...
On Safari 10.1 and other common browsers like Chrome, Firefox... is working perfectly.
Looking at this site it appears to be using jQuery 1.12.4 and jQuery Migrate 1.4.1 - this is adequate if you need to support IE6 but not something I'd expect to be sufficient for Safari 10 (released after these legacy libraries).
On top of this you appear to be using Isotope 3.0.1, which is also about a year out of date.
So, first I'd recommend:
Upgrading to a current version of jQuery and dropping Migrate - IE6 is dead and IE8 is marginal.
Upgrade Isotope to the current version.
In particular check their issue logs for similar issues before raising them on here.
If the problem persists after that then you may have an issue specific to your implementation. Isolate the code in a snippet in your question - it's much easier for us to help you with one specific issue without reverse engineering your entire site.
Delete this code https://yadi.sk/d/YmKdx2Rd3M2Fcj and your effect will be work fine
and look this video https://www.screenmailer.com/v/EEa7t15khxyLE9s
Related
I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.
Currently having issues browser and device testing a website. The Jquery slide toggle navigation works on all devices and browsers apart from ones running versions of Safari below 9 (however Safari 9 works completely fine).
I have used the following code:
jQuery(document).ready(function($) {
function toggle() {
$("#nav").toggleClass("toggle")
$("#button_pannel1").toggleClass("toggle")
$("#button_pannel2").toggleClass("toggle")
$("#button_pannel3").toggleClass("toggle")
}
$("#toggle_button").on("click", toggle);
});
I built this using the following code on Codepen (which also doesn't work on old Safari versions either)
Any help would be much appreciated.
The issue is not with your jQuery code.
You are missing the necessary browser prefix in your CSS to make it work on Safari in versions below 9. Where you have "transform: translate3d(-300px,0,0);" you need to also add "-webkit-transform: translate3d(-300px,0,0);" to the CSS rules.
Here you can see which browsers require prefixes in order for 3d transforms to work in CSS:
http://caniuse.com/#feat=transforms3d
I am working on a new site, currently hosted here. I am implementing a single page design using the Ascensor plugin, found here. It works fine in Chrome and Firefox, and IE10 and IE9. However, in IE8, the home page loads and then if I click on any of the navigation icons, the page starts shaking, literally shaking left and right very fast, and the browser crashes after a few seconds. I have used Ascensor in IE8 before, and it had worked. I can't even debug as it just crashes without any warning in IE8. I've been trying to figure out what's wrong for the past few hours, with no success.
I checked the behavior in IE8 by:
Changing the document mode to IE8 in IE10.
Using a Win7-IE8 VM
If it helps, I am also using the following jQuery plugins on the page.
CarouFredSel and FancyBox for the gallery.jQuery custom content scroller
Also, I am using jQuery 1.8.3 as Ascensor does not run correctly using later versions.
Someone please point me in the correct direction. Thanks.
The issue was related to the scrollbar (not sure why it was occurring though). Using the following CSS on the body fixed the issue.
body
{
overflow: hidden;
}
I have the below site:
http://kelseydelo.com/
When I click the main nav links in Safari the content slides properly. However in Chrome and Firefox nothing happens when I click these (no errors in Firebug either).
I believe it used to work in FF so it seems a recent upgrade has broken it.
Anyone know what the problem could be?
you use mootools 1.2.3 which is old. in 1.2.3, mootools utlised feature detection for browser detection - and in particular, it was a problem with firefox as it relied on the following code:
if (!document.getBoxObjectFor ...)
but that method got made obsolete by mozilla. subsequently, in 1.2.5 and 1.3 mootools detection was done so it does not rely on this any more (breaking change was FF 3.6.nn or something)
on your site in FF 4.0 you can run
console.log(Browser.Engine)
and it comes back as 'unknown' - which will make any browser-specific hooks and fixes fail.
In Chrome 13 Canary, it detected webkit fine but does not work either so there must be something else -- legacy here... in other words, UPGRADE to 1.3.2 (which uses ua-sniffing) - if noobslide supports it, else go 1.2.5.1
Im using jCrop http://deepliquid.com/content/Jcrop.html and there is a weird problem
it wont work while im in ie8
if I was on ie8 and select document mode ei7 from developers tools it works fine
what can I do ?
Are you using the latest version? Seems there is an IE8 fix:
http://deepliquid.com/blog/archives/142
Edit: Strangeness ahoy! It only works after i turn on compat. mode, then turn it off o_O. My IE8 window was open from an earlier test and I didn't notice.
can you test with the latest and greatest version on github? It has major MSIE updates. I am currently working on a blog post announcing this release.
The issue is dealt with here, which is a bit of a hack to hide the radio button