Now this really has me stumped. I'm not going to use a codepen because I simply can't recreate it until I identify the problem. Currently, I'm using Google Chrome. The problem doesn't exist in Modzilla Firefox, Microsoft Edge, Internet Explorer, or Opera.
It's an issue with usually a simple fix. The page scrolls horizontally off the page canvas. I believe it may have something to do with the fact that my laptop I'm viewing the page on has a touchscreen, but most likely not.
I've tried a number of hacks to fix it, including:
1) Tried to put set the max-width of the browser to the innerWidth with javascript.
2) Tried to add overflow:hidden to the CSS of the outer container of my off-canvas menu.
3) I even used the Chrome Dev Tools to delete each element at the time to try and identify the problem. Until EVERY visible element was gone, the problem remained.
4) Set overflow-x:hidden on html and body
5) Also tried to add the following javascript try and to debug:
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
6) Tried all of these at the same time.
Therefore, I'm completely stumped.
Here's the link to the site: The Problem
Related
I am calling this javascript on page load
document.body.scrollTop = document.documentElement.scrollTop = 0;
I want html page starts from top when loaded, above javascript working fine for chrome, safari(macbook) but not working for safari on iphone,
can anybody suggest workaround in javascript only.
Posting this here for future visitors from Google.
This same error occured to me... The problem was just one CSS rule on body element.
overflow-x: hidden
If this CSS rule exists, remove it and scrollTop should work on mobile Safari.
As I tested this before, there are problems rendering on ios, but it also depends on the version of the OS for example, for an iPad pro, there is no problem! But on iPad air you there isn't much to do! so what you can do is to make your code compatible like:
document.scrollingElement.scrollTop
it should give you the right solution.
I have a one-page website built on Bootstrap. All of the menu items are internal links pointing to divs in the body, and I have a bit of smooth scroll javascript to animate page's scrolling.
Everything works fine in Chrome and IE, but in Firefox the links don't work at all. It seems like a Javascript issue, because if I comment out the lines referring to the smoothscroll .js file, then the links work fine.
The javascript that I'm using is this:
$('a[href*=#]').each(function() {
if($(this).attr('href').indexOf("#") == 0) {
$(this).click(function(e) {
e.preventDefault();
var targetOffset = $($(this).attr('href')).offset().top;
$('body').animate({scrollTop: targetOffset - 70}, 700);
});
}
});
What am I missing/doing wrong?
You can take a look at the actual site in question here.
Change your scrollTop animation to
$('body,html').animate({scrollTop: targetOffset - 70}, 700);
That should fix it in FF an also still work in Chrome.
update
Just in case you're asking why: I don't know for sure, so this is what I guess is happening: if you compare the HTML and BODY in FF and Chrome, in FF the size of the HTML-Element is as big as your rendered document. In Chrome your HTML-Element has the size of the Browser-Window and your BODY-Element is as big as your Page rendered. They render differently. FF scrolls the HTML inside its Window and Chrome scrolls the BODY inside the HTML.
As pointed out in other threads / comments (here for expample) this solution makes two calls. So you could put an if before scrolling or use document. The latter didn't do the trick for me, because it scrolled where I wanted it to scroll to, but didn't animate. Without if I personally just find it nicer to read and it shouldn't be such a big thing to call animate twice in that case. So the better solution would be detecting the browser and using either $('html') or $('body').
I have a jQuery onclick menu that works great in IE9+, Chrome and Firefox. However in IE8 it opens extremely slowly. It takes approximately 10 seconds for the menu to show, and none of the animations play, the menu just appears.
The menu uses the latest version of jQuery (v1.10.2) and uses slide and animate only to open and close the different parts of the menu. I have tried googling various combinations of slow jQuery, slow loading menus and slow animations for IE8 and jQuery that I can, and I cannot even find anything remotely like the issue I'm having.
You can see the problem by going to my website here. Visit it with IE8 and you will notice the really slow speeds when you click on Test Category 1 or 2.
Has anyone come across this kind of issue before? Does anyone know what causes it and the solution to get it working fine?
Edit
I have noticed that it's not just affecting the menu, but also the carousel. If you look at the animations they are not sliding either, however in IE9 + they do slide. I'm not sure if the two are linked but it seems odd that it's both jQuery effects that are being affected.
Edit 2
After some more testing I have noticed that if the bottom of the menu falls over the Tabs below the carousel then the bit over the tabs shows straight away, if you however over the tabs. Same happens when you close the menu. Hover over the tabs and the bit of the menu drawn there goes away.
I then watched and noticed that the menu shows and disappears when the carousel changes. It does seem to be a redraw issue, however the code I've been trying to make it paint upon completion doesn't seem to be working. This is the code I got from another answer here (slightly modified to work with jQuery elements thanks to an answer below).
function FlushThis(id){
var msie = 'Microsoft Internet Explorer';
var tmp = 0;
//var elementOnShow = document.getElementById(id);
var elementOnShow = $(id);
if(navigator.appName == msie) {
tmp = elementOnShow.parentNode.offsetTop + 'px';
} else {
tmp = elementOnShow.offsetTop;
}
}
I think it might be a case of either finding the correct function to redraw, or running that function on the correct element. I currently run that on the clicked element, which may not be the correct one. I have tried running that function on various elements, including the main UL, the element clicked, the element, opened and the element opened's parent. No luck with any of them.
JSFiddle: As requested here is a JSFiddle of the issue, however for me that won't even work in IE10. It works in Chrome fine.
EDIT 3:
I have stripped away everything except the bare essentials and put it in a test file. You can veiw it on my website here. I am getting no errors in IE console, nor in any other console. It is still giving the same issue, where the menu isn't drawn. However because there is no carousel behind it to force the redraw it never shows on this test site.
All the redraw scripts I've tried so far have failed. How can I get this working?
I don't know if this is related or not, but I noticed that there's an error that occurs each time you click on those menus.
Uncaught TypeError: Cannot read property 'offsetTop' of null
It occurs in the "FlushThis" function (from jquery.fluid-menu.js) which is apparently some kind of hack to support IE. If you look at the code, it attempts to read the "offsetTop" property of an element and then simply throws away the result. Perhaps this is a trick on IE to make it run some native code that will maybe repaint/relayout the page once the menu has been opened? It looks like a jqueryified element ($this) is being passed to that function instead of the ID of the element, which I presume is causing the look up to fail. You may want to try to get that code executing properly and see if it resolves your problem.
Too many script issues to look into the real problem.
SCRIPT1028: Expected identifier, string or number
jquery.fluid-menu.js, line 15 character 3
SCRIPT438: Object doesn't support property or method 'fluidMenu'
main.js, line 3 character 2
The script issues arise when the menu is clicked.
Chrome, and Mozilla tolerate errors to the maximum without letting user know that there is a script error. But IE is not so kind hearted. IE 8 & - are natively slow in running scripts many animation effects wont work in them since the properties like opacity are ignored by it, unless you have fall back options.
Maybe the slideshow overlays the menu while animation is playing.
I could just set my ie10 to ie8 mode and saw the the layers are not in best order for display.
Did you try to set the z-index on the menu?
Perhaps you try hide the the carousel temporary and check if the menu opens well then.
Is there a specific reason you're using "document.getElementById" rather than a JQuery selector here? It's not finding document.getElementById(id) and it's throwing an error on this line: tmp = elementOnShow.parentNode.offsetTop + 'px';:
function FlushThis(id){
var msie = 'Microsoft Internet Explorer';
var tmp = 0;
var elementOnShow = document.getElementById(id);
if(navigator.appName == msie) {
tmp = elementOnShow.parentNode.offsetTop + 'px';
} else {
tmp = elementOnShow.offsetTop;
}
}
Maybe change var elementOnShow = document.getElementById(id); to var elementOnShow = $("#" + id);?
Also, why are you adding 'px' to the end for IE? Try commenting that out so it just says tmp = elementOnShow.offsetTop and see if that makes a difference.
The error is probably just disabling most of the rest of the Javascript on that page.
One other thing I've found: sometimes "slideUp" and "slideDown" and other "built-in" animation methods seem to be buggy or crunchy in IE (like, they animate most of the way, then they stop for a second near the end of the animation, and suddenly blink to the end).
I always use the JQuery animate() function for everything. It's a bit more of a pain to write, but you can specify outerHeight/outerWidth values that take padding into account and things like that. Try replacing your functions with animate() and see if that helps!
This question has me completely stumped. Since it's in a browser extension, I can't post my code.
The issue is apparently that mouse events inside the iframe (hovering over a link, over text, selecting...) are off by about 200px, this includes right clicks as shown in this screenshot:
The red dot is the actual mouseclick location. Again, since this is an extension (I'm actually doing the JS part in Tampermonkey, it's easier) I can't try it out in other browsers so it might just be chrome.
The iframe is to contain third-party dynamically loaded content so I can't use a div or other element. It's also reused and is dynamically inserted on load.
This also doesn't happen the first time content is inserted instead it takes a few "cycles" to appear.
Any ideas?
This was apparently a Chrome bug, albeit a strange one. I started having other issues so I reinstalled Chrome and upgraded to Windows 8 (I was planning to anyway), the bug seems to have gone away.
EDIT: It just came back, it turns out that the issue was that I was using -webkit-transform: scale() to show and hide the frame with a transition, removing this fixes the issue.
So, to all those with iframe mouse event issues in Chrome/WebKit: check all of your transforms and any CSS3 effects, try removing them one at a time.
I have this generic javascript function to open a window:
function OpenWindow(url,windowname,wide,high)
{
spop=window.open(url,windowname,"width="+wide+",height="+high+",scrollbars=1,resizable=1,statusbar=1,menubar=0");
spop.moveTo(Math.round((screen.availWidth-wide)/2),Math.round((screen.availHeight-high)/2));
spop.focus();
}
After opening it, I move it to the middle of the screen.
The problem is that Chrome is currently hiding the opened window (it works fine in Explorer and Firefox). It opens it, moves it, but then the windows stays minimized and unaccesible.
The funny thing is that if I double click on the link that calls the function, then the window appears where it should, only that its size and height are incorrect (it's very small, and I hav to resize it). Even funnier, is that it used to work in Chrome, but stopped working a couple of months ago.
Apaprently the problem is not the focus() call (I have found people having issues with it). If I remove the moveTo(), the window appears (but not centered).
Any ideas?
Thanks!
It turns out this is a known bug in the current version of Chrome:
http://code.google.com/p/chromium/issues/detail?id=115585
It seems the fix is to delay any calls to resizeTo or moveTo after calling open, for example:
setTimeout(function(){
spop.moveTo(
Math.round((screen.availWidth - wide) / 2),
Math.round((screen.availHeight - high) / 2)
);
spop.focus();
},100);
Not the most elegant solution, but it should suffice until the bug is fixed.