I'm using GSAP animations in a project and I keep running into this bug where upon page refresh the window will sometimes be in random places. When this happens I just type in window.pageXOffset to see where it's at. This sometimes happens with the Y axis as well. I'm using Chrome, but I've tested it out on Safari and it hasn't happened but it's a totally random bug. It usually will happen when my inspector is out and I've been clicking around A LOT! Clicking the 'empty cache and hard reload' button has fixed it every time. This is a wordpress project too, so I'm not sure when the scripts get loaded if that matters. Anyone know what's going on???
Related
I hope someone can help me figure out this issue because I'm at a loss.
In one of my sites, it seems there is an issue when pages are reloaded.
Sometimes (not all the time, just sometimes, which makes it even weirder), when I refresh the page, the page will jump to bottom for a second, and then it will jump back up to the position you were in.
Here's an example: https://www.gamesatlas.com/cod-modern-warfare/guides/all-operators-in-call-of-duty-modern-warfare-full-list-of-characters-for-coalition-and-allegiance-factions
Go about halfway through the page. Then refresh. Keep refreshing the page. At one point you will see that Chrome will jump to the footer, and then jump back up to the position you were in. And this will keep happening on subsequent refreshes.
If it doesn't happen with this page, you can try ANY page of the website, same thing.
Can you reproduce it? And if so, does anyone have any clue on why this is happening? It's making me pull my hair out.
The weirder part is that this happens only one of my sites, despite having other sites that are set up pretty much identically (same exact code), yet it doesn't happen there.
So I'm really at a loss. Any help would be appreciated! Thanks!
I had a problem like this, it seemed to be caused by a Chrome extension that I had logged out of (in this case, boomerang). When I removed the extension, the problem seemed to go away. It was driving my crazy too.
I have a simple html page that displays some monitoring results, it reloads every 2 minutes and makes noise when those results are not acceptable. I keep this page open 24/7, so new Chrome started freezing and suspending it, as I found out via chrome://discards/ .. So the page stopped making noise and catching my attention, mostly cause the tab gets frozen by Chrome. That happens if I forget to leave the tab with this page active, "on top". Is there a rather simple way to prevent Chrome from freezing the tab, even if it is not active? I could involve some Javascript, if needed..
I am aware that there is a simple solution of opening new window with this page and leaving it alone. On the other hand, I made the page, so I can make changes to HTML in order to ensure that page remains unfrozen. I tried updating title with current time on every reload, this visibly helped, page seemingly always has fresh time in the title, but it still doesn't make noise. And if I switch into it when noise is supposed to happen, - it starts the sound half way like it was trying to all alone.. it's even funny..
Is there any simple solution to this? Thanks for your help.
So, I am in a conundrum with my JS failing after a certain amount of time through the menu navigation. Since it works with the console debugger open, I assumed it was a console.log error, but I have removed those functions.
If you open up this page, http://behrent.com/test/Industry.html, in internet explorer, then use either your arrow keys or the menu headers to scroll many times right or left in a row it will break. It currently works in Chrome and FF.
It's almost as though the js crashes or something.
Any ideas on what might be occurring? My JS doesn't have any console.log.
On another page using same css and js, but different html it is also producing scary behavior. http://www.behrent.com/test/Services.html. Basically if you go to that site you can navigate through them if you go slowly, but if you go very quick it will then break in the same fashion as the first page.
Just hope I don't have to move to another layout.
Chad
Figured it out. IE was expecting background images in the various sections, but I didn't indicate that any existed. IE got confused because it was expecting them as I indicated, but they didn't exist in the css, so it just broke.
Calling not existent sections with js makes things break. The more you know...
I have a php page that hangs for 3-10 seconds after the page loads, you can't even scroll up or down, or close the tab when this happens. (the chrome loading gif still loops tho) Happens in Chrome and IE.
Chrome Timeline: http://imgur.com/wF5Pioz,KRbnxIm#0
Shows ContentVeil.js repeating over and over. I think it is client side(?), I did a grepWIN to search for ContentVeil, with no luck, and it doesn't show up in Chrome Network tab.
Chrome Profile: Second image, from above link.
I think this shows the issue at the anonymous function from meta-boxes.min.js, ln 1.
meta-boxes.min.js: http://pastebin.com/yqtJyqB1
Unfortunately line one is a function that encapsulates the whole script. I don't know js very well, I tried to just remove each function one by one but that just created more errors.
Any ideas on how I could find the source of the problem would be much appreciated.
It's part of the Evernote web clipping extension, and it's hooks DOM events, causing massive slowdowns if you are doing large amount of dom changes.
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image