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;
}
Related
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
I am working on a new page, the domain is quite large and I have never encountered this problem. I have finished my page that shows very well in all internet browsers, except in Chrome, I have cleaned the cache and nothing fixes
Could it be my CSS?
Any experience and / or suggestion?
In the image on the left is EDGE on the right is Chrome
If you think your code is error-free and it is the caches you're having trouble with. Then try pressing CTRL+F5 to reload the page. It works for me when the changes in the page are not being applied consistently.
It was conflicting attributes between a personal CSS3 Class and a bootstrap class, each browser would render differentely
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.
I have a JS script which works in every browser except IE 9. I am not thrown any errors in my IDE or on the page itself but the loading icon just seems to continuously rotate instead of loading the image.
Page can be seen at:
http://www.nacdbenefits.com/jmarston4
I have used tools like Firebug in Firefox before to recognize some issues but this one is stumping me. Anybody had a similar issue before?
you can use IETester
I'm doing some maintenance work on somebody else's site and there's an IE 9 problem. They're using what appears to be a Lightbox to an image gallery. When you click on a certain image on the page, the Lightbox appears, but in IE 9, the Lightbox doesn't show up at all. There's no error or anything - it just silently fails - so I'm kind of at a loss as to how to troubleshoot.
I'm not the best at these kinds of problems. Can someone point me in the right direction?
Here's a link to what I'm working on: http://www.aquilacommercial.com/wlproperties/view/1300-Guadalupe
#Jaitsu, I confirmed that this occurs. For me, IE9 begins to open Lightbox and then immediately opens the image on it's own page. All with no errors.
I'm still unsure on IE9's issue but this might help with an alternate solution:
Most Compatible JQuery Lightbox Plugin, Works in All Current Browsers?
Finally, have you upgraded to Lightbox v2.05. Changelog indicates it didn't work on IE9 till 3/18/11. You might need to upgrade some files.
I confirmed that the Lightbox website is using Prototype v1.7. Your site is using Prototype v1.6.0.2.