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.
Related
I have some problems with my website. My site is coded in HTML,CSS and JS.
Everywhere works perfect, Desktop (all browsers), Android (All browsers), in iPhone(iOS.11) doesn't work!!!
I think there may be two problems:
1. When i open the site, i have Loading Page script, and in iPhone it stops there and doesnt open the site.
2. The problem may also be with the new iOS 11, because with earlier iOS(10) was working very well.
Any suggestion, or any site which i can check my errors (debugg) or..?
google didn't solve my problem so i decided to ask, but still can't find the problem!!!
Thanks.
If you have an OSX available you can enable remote debug and see what's happening, most likely something is breaking based on something not being available.
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 have a website under development at Pragmatometer.com, and it seems to display perfectly, so far as I can tell, on Chrome, Safari, Opera, and Edge. Things are not equivalent with Firefox.
The page you will see if you visit the site looks different on Firefox from the others. The initial login screen on all the others is a stretched background via a jQuery plugin. Furthermore, if you create a login page on the other browsers, you will see widgets once you've logged in. On Firefox, it's essentially a white screen of death. Apart from a link at the top right that is directly present in the HTML, not built by ReactJS JavaScript, none of the four basic widgets display. Furthermore, I found nothing interesting in Firefox's debugger; there was a document.getElementById-related error, but it was not in my code and drilling down did not seem to cause anything to surface.
Are there issues with ReactJS and Firefox? I suspect something other and more, as the login screen doesn't use ReactJS and minimally uses jQuery for a background stretcher.
What should I know about developing for Firefox vs. developing with the others, now including Edge?
Thanks,
I am developing a website with has a header as (channels,...) and the header is working fine in all the browser except safari. The code is work fine on chrome as well still i facing the issue on safari browser. Is there anything which i missed in the code specified in the link. I also tried with the code to fetch browser and write a separate code for it but it also not works for me. Should anybody help me how to fix it. What i have already tried is : http://www.code-dynamix.com/blazemedia/services-channels.html
Problem exist at the Second header (Channels,...) where slider comes little bit down in safari.For better clarification just see the same header in any other browsers such as firefox, chrome and then see the header in safari.
Thanks in advance.
The JavaScript works fine for me in Safari 5.1.7 on Windows 7, but there are differences with how the header is rendered. This is an issue with CSS however. As best I can tell, there are no defined heights on any of the containing elements. You should define the heights when you can, this will help keep a universal look and feel.
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;
}