I'm in the process of creating a single page site that relies on the scroll-behavior:smooth CSS property and the method .scrollIntoView({behavior:'smooth'}). I use these mainly to provide a smooth transition between sections, not critical but aesthetically pleasing. Suddenly this feature doesn't seem to be working in Google Chrome. I tested out on Firefox and Chrome mobile and in these works.
I made this pen with the basics of my page: https://codepen.io/gabriel-ar/pen/rEjdYb
Temporarily I've been using https://github.com/iamdustan/smoothscroll , and it solves scrollIntoView, but other plugins like PhotoSwipe are not handling transitions well.
Therefore, what is the best fix here? smoothscroll solves part of it, but apparently not everything.
Is this a bug in Chrome?
scroll-behavior:smooth doesn't seem to be the only property affected, what other thing could have stopped working, if any?
Google Chrome Version 106.0.5249.119
I already uninstalled Chrome and reinstalled it. I Also ran a clean install on a sandbox with the same results.
Thank you!
Update & Solution
It seems this is a local issue, just happening on my computer. Thanks for the replies!
I faced the same issue some time ago, and I came up with this solution:
Open new tab
Go to Chrome's Experimental Flags (chrome://flags)
Search for 'smooth scrolling'
Set the flag to enabled
Let me know if that works for you!
An alert/prompt called from chrome extension background pake is shown off the screen (or partially in top left screen). This bug has been fixed in canary build by now, see
http://code.google.com/p/chromium/issues/detail?id=113899 , but I need to get it working as soon as possible. Do you have any ideas how to work this around using javascript?
Thanks in advance.
PS: I'm talking about this extension: https://chrome.google.com/webstore/detail/jfiakckbklmccchjegnnojbalafebakb
You can't position the alert or prompt dialogs in browsers. You have to wait for the bug fix to propagate to the stable branch.
An alternative option is to inject an HTML lightbox into the current tab but that would be a lot of additional work.
One way to go is to further investigate the canary source code, found at the Chromium project on Google Code.
The issue is reported on the Chromium issues page, and the fix seem to be found at this revision on the Chromium sources.
You can check out the diff and compile a workaround based on their solution.
I'm trying to use a jquery-plugin called bigText. An awesome plugin for create block-headers. If you want to use this with a custom font, it states that you need google webfont loader, this way you can use a callback to trigger the plugin AFTER the #fontface has loaded/rendered.
It works fine in FF, Safari, Chrome, but it keeps crashing ie6-7-8, hard. A soon as the page loads it says it has an error and asks if you want to send a report to MS.
You can check out the code here
I'm sure this is triggered by the Google font loader, When commenting out all the other parts of the code it still seems to crash. When commenting out the google font-loader bit, all the other things work => font loader only example
Has anyone here ever experienced a bug like this and maybe found a solution?
First of all, I have had the same bug.
The first note is that you must reproduce the bug on NATIVE IE 6-8, not IE 9 using the Dev Tools -> Browser Mode.
I have isolated the bug to an incompatibility with Modernizr 2.5.2, simply upgrade your modernizr build and you'll be all set~
EDIT - Just upgrade to the latest version 2.5.3 of Your Build Here
Edit 2 — Verified that it's fixed on our Orlando Web Design Page
I'm working on creating a FPS-type game for the browser using WebGL/Javascript and have been unable to successfully implement the very recently added "Mouse Lock" feature to Chrome and Firefox.
I have tried the example code from all three of these sources to no avail:
http://code.google.com/p/chromium/issues/detail?id=72754
http://blog.sethladd.com/2011/09/mouse-lock-for-html5-fps-games.html
http://jsfiddle.net/jdias/3dqBL/
So, that leads me to my question. What is the correct way to lock the mouse in the latest versions of Chrome and Firefox (Minefield)? I would really love to get this working!
Thanks in advance.
Mouselock actually hasn't been implemented in Firefox, but there is an experimental build located at: http://people.mozilla.com/~tmielczarek/mouselock+gamepad/ . With google Chrome, get the latest version and go into about:flags and check --enable-pointer-lock.
I hope that helps.
I'm working on a .NET 3.5 website, with three projects under one solution. I'm using jQuery in this project. I'd like to use the Visual Studio JavaScript debugger to step through my JavaScript code. If I set a breakpoint in any of the .js files I get a warning that says:
The breakpoint will not currently be hit. No symbols have been loaded for this document.
How do I fix this? I'm guessing that Visual Studio is having some trouble parsing through some of the jQuery code. I will try to replace the minimized version of jQuery.js with the expanded version, but I don't think that will fix it.
I was experiencing the same behavior in Visual Studio 2008, and after spending several minutes trying to get the symbols to load I ended up using a workaround - adding a line with the "debugger;" command in my JavaScript file.
After adding debugger; when you then reload the script in Internet Explorer it'll let you bring up a new instance of the script debugger, and it'll stop on your debugger command let you debug from there.
In this scenario I was already debugging the JavaScript in Firebug, but I wanted to debug against Internet Explorer as well.
Make sure you turn on script debugging in your internet options. And if you think it's on, double check it.
I had the same issue, but I solved it by changing my browser settings in Internet Explorer. Go to menu Tools -> Internet Options, select the Advanced tab, then make sure that both "Disable Script Debugging (Internet Explorer)" and "Disable Script Debugging (Other)" are unchecked.
Also, I needed to set Internet Explorer as my default browser, which is normally set as Firefox. To do that, in Visual Studio just right click on any browseable file in Solution Explorer and select "Browse With..." Select Internet Explorer and click "Set as Default".
I'm not sure if there's a way to get debugging running with other browsers, but it wouldn't surprise me if Visual Studio only plays nice with Internet Explorer.
Also, you may need to do "Attach to process" and add IExplorer.exe to get the debugger to start.
I would suggest using FireBug for JavaScript debugging. Give it a spin :)
I finally found the answer to this I think.
When you attach your debugger to the iexplore.exe process, you need to make sure you select "Script" as one of the debugging choices.
It's the button in a red box here: Screenshot of Select Button in Attach to Process Window
Then on the next screen, choose Script: Screenshot of Select Code Type window
This will warn you that you cannot debug Managed and Script at the same time, but that should be fine because your managed code is your server code and you attach to the web process (aspnet or w3wp) instead.
You'll know you did it right because VS 2008 will load ALL the script documents pertaining to that page (inline stuff, eval stuff, etc.) in Solution Explorer.
You'll have full access to the DOM, the immediate window will work, etc. It's pretty slick.
One other thing you might look for is a syntax error in your JavaScript code. That is what happened to me today. No symbols would load because I had one too many parentheses in my code. The IntelliSense barely registered the error. Once I fixed the syntax error, everything worked normally.
All of these answers are correct, but there is one more thing to check. Until yesterday I was always able to debug my JavaScript code from inside of Visual Studio (2012). I had added a Silverlight project to the solution, which turned on the Silverlight Debugger. This was my problem.
On the property page for the web application -> Start Options -> at the bottom of the page be sure that "Silverlight" is unchecked. Actually, I have only ASP.NET checked and now the debugger goes through Visual Studio.
Unchecking it and now the debugger stops on the "initialize" function as I wanted.
The solution for me was to update the IE from version 9 to 11. Hope it helps to someone. Peace!
You have to wait for the IDE to parse the JavaScript code. Just wait a while and you should see the JavaScript code change color. You will then be able to add breakpoints.
I had the same annoying issues on Visual Studio 2013, and JavaScript development without a debugger is just suicide.
All I did to fix it was to right click the break point red dot -> Disable Breakpoint and then right click again -> Enable Breakpoint.
This made the debugger work on JavaScript like a charm again.
This can also happen when your solution has multiple web projects, even if they're being served from a different ASP.NET Development Server (WebDev.WebServer40.exe) instance on different ports.
If running two or more web projects within your solution and you have multiple script files with the same name at the same place in different webs, the development web-servers may serve up the wrong file, causing this problem.
In my case, deleting the extra copies resolved the problem.
I sometimes have this problem with external JavaScript files - it is caused by the browser cache holding onto an old copy of the file. Forcing a refresh of the page linking to the JavaScript code solves the issue in this case.
Of course, make sure your debugger is attached to the correct browser process. ;)
This is perhaps glaringly obvious, but I stumbled over this for a second, so perhaps others will too. I didn't have Internet Explorer set up to handle HTML/HTTP, and hence it was not launched when I pressed the run button in Visual Studio.
Instead, I was starting Firefox. I went to Start Button | Default Programs, set all the defaults for Internet Explorer, and then debugging started working in Visual Studio for me without any other fuss.