javascript - Can't focus elements on load in Chrome - very weird bug (in Chrome?) - Stack Overflow

admin管理员组

文章数量:1023885

I have a very, very weird issue that only seems to be an issue in Chrome. When a user es on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.

This behaviour can only be reproduced in Chrome and not on localhost.

The difference between localhost and beta environment is:

• beta env requires authentication (basic http auth)
• files in development env are concated in a single JS and single CSS file and both are minimized
• beta env includes hotjar, while there's no hotjar on localhost

There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.

The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).

I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password). I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.

The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?

EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.

I have a very, very weird issue that only seems to be an issue in Chrome. When a user es on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.

This behaviour can only be reproduced in Chrome and not on localhost.

The difference between localhost and beta environment is:

• beta env requires authentication (basic http auth)
• files in development env are concated in a single JS and single CSS file and both are minimized
• beta env includes hotjar, while there's no hotjar on localhost

There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.

The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).

I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password). I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.

The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?

EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.

• javascript
• jquery
• html
• css
• google-chrome

Share Improve this question Follow edited Jul 10, 2017 at 18:39 l.varga asked Jul 10, 2017 at 18:14 l.vargal.varga 87166 silver badges1414 bronze badges 12

• Do you have the latest version of chrome? Can you inspect the page in the focus disabled state? Does everything look correct when you inspect? Like if you inspect a heading, does the inspector actually land on the heading? Does the issue persist on different puters? It's hard to trouble shoot when there is no code or test site – Huangism Commented Jul 10, 2017 at 18:27
• Yes, latest version of Chrome. As I said, as soon as I interact with the -chrome window (eg open browser console), everything begins working and works after subsequent page reloads (even if I clear cache) – l.varga Commented Jul 10, 2017 at 18:29
• and yes, the issue persists on different puters and even in mobile chrome.. but works normally in all other browsers – l.varga Commented Jul 10, 2017 at 18:35
• What if you have your dev tools open and reload, use the inspect icon and click on random element to see if it inspect on the corresponding element? Or try disabling js in the browser and see if it still occurs. It sounds like there is something blocking any action, maybe look at the auth if that seems to be causing the issue – Huangism Commented Jul 10, 2017 at 18:48
• The only way to open dev tools is to open incognito mode, open dev tools, then visit my app. Focus doesn't work. As soon as I click anywhere in my dev tools, I can focus elements again. If I do the same (open incognito, disable JS, visit app), I cannot focus the elements. As soon as I click somewhere in my dev tools, I am again able to focus elements. After I reload, etc., I can still focus elements, until I close my browser and try again. Note: I can have 2 tabs opened (1 random page and my app), close tab with my app, then open it app in another tab and everything works as expected. – l.varga Commented Jul 10, 2017 at 18:56

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 5

So it seems it indeed is a Chrome bug that's present both on mobile (Android and iOS) Chrome browsers, as well as desktop Chrome browser (tested both on a Windows and a Mac). I submitted an official bug report. In the bug report, a fellow user made a website that's accessible only through basic auth and only has 2 basic inputs, the input should get a red border on focus. As expected, after opening the webpage in Chrome (for ease of use - incognito mode), the input doesn't get focus and the border doesn't change.

For those who are also affected by this bug in Chrome, you can track the bug progress here: https://bugs.chromium/p/chromium/issues/detail?id=740652

Meanwhile, here's a hacky solution for those interested:

$(document).on("ready", function() {
    var $inputs = $("input");
    $inputs.off("click.trick");
    if (!sessionStorage.fixedChromeFocus) {
        sessionStorage.fixedChromeFocus = "true";
        $inputs.on("click.trick", function() {
            var win = window.open("/", "_blank");
            setTimeout(function() {win.close()}, 1);
            $inputs.off("click.trick");
        });
    }
  });

The goal is to, somehow, interact with the browser outside of the current page, to make it somehow lose focus. You cannot use JS to minimize browser, cannot resize it, cannot open dev tools. What you can do, though, is open a new window. Of course, if you open a new window immediately, a pop-up blocker (as most people have it) will block it and the window itself (or rather your current tab) won't lose focus. Opening a new window can only be done as a reaction to a user event (without triggering potential pop-up blocker).

I also use some browser detection so the code will only be executed for Chrome and, using server-side conditioning, only for builds that include basic auth. What the code does, quite self evidently, is that as soon as a user clicks on an input, it opens a new tab and quickly closes it, 1ms later. To prevent this from happening all the time, on every page load, sessionStorage, which gets cleared automatically after tabs from that domain are closed, is used (and we've already established that once focus starts working correctly, it will work as long as you keep your browser open).

The effect of this code is that the user will see a quick white flash the first time he clicks on the input, but everything will work correctly

I have a very, very weird issue that only seems to be an issue in Chrome. When a user es on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.

This behaviour can only be reproduced in Chrome and not on localhost.

The difference between localhost and beta environment is:

• beta env requires authentication (basic http auth)
• files in development env are concated in a single JS and single CSS file and both are minimized
• beta env includes hotjar, while there's no hotjar on localhost

There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.

The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).

I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password). I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.

The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?

EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.

I have a very, very weird issue that only seems to be an issue in Chrome. When a user es on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.

This behaviour can only be reproduced in Chrome and not on localhost.

The difference between localhost and beta environment is:

• beta env requires authentication (basic http auth)
• files in development env are concated in a single JS and single CSS file and both are minimized
• beta env includes hotjar, while there's no hotjar on localhost

There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.

The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).

I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password). I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.

The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?

EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.

• javascript
• jquery
• html
• css
• google-chrome

Share Improve this question Follow edited Jul 10, 2017 at 18:39 l.varga asked Jul 10, 2017 at 18:14 l.vargal.varga 87166 silver badges1414 bronze badges 12

• Do you have the latest version of chrome? Can you inspect the page in the focus disabled state? Does everything look correct when you inspect? Like if you inspect a heading, does the inspector actually land on the heading? Does the issue persist on different puters? It's hard to trouble shoot when there is no code or test site – Huangism Commented Jul 10, 2017 at 18:27
• Yes, latest version of Chrome. As I said, as soon as I interact with the -chrome window (eg open browser console), everything begins working and works after subsequent page reloads (even if I clear cache) – l.varga Commented Jul 10, 2017 at 18:29
• and yes, the issue persists on different puters and even in mobile chrome.. but works normally in all other browsers – l.varga Commented Jul 10, 2017 at 18:35
• What if you have your dev tools open and reload, use the inspect icon and click on random element to see if it inspect on the corresponding element? Or try disabling js in the browser and see if it still occurs. It sounds like there is something blocking any action, maybe look at the auth if that seems to be causing the issue – Huangism Commented Jul 10, 2017 at 18:48
• The only way to open dev tools is to open incognito mode, open dev tools, then visit my app. Focus doesn't work. As soon as I click anywhere in my dev tools, I can focus elements again. If I do the same (open incognito, disable JS, visit app), I cannot focus the elements. As soon as I click somewhere in my dev tools, I am again able to focus elements. After I reload, etc., I can still focus elements, until I close my browser and try again. Note: I can have 2 tabs opened (1 random page and my app), close tab with my app, then open it app in another tab and everything works as expected. – l.varga Commented Jul 10, 2017 at 18:56

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 5

So it seems it indeed is a Chrome bug that's present both on mobile (Android and iOS) Chrome browsers, as well as desktop Chrome browser (tested both on a Windows and a Mac). I submitted an official bug report. In the bug report, a fellow user made a website that's accessible only through basic auth and only has 2 basic inputs, the input should get a red border on focus. As expected, after opening the webpage in Chrome (for ease of use - incognito mode), the input doesn't get focus and the border doesn't change.

For those who are also affected by this bug in Chrome, you can track the bug progress here: https://bugs.chromium/p/chromium/issues/detail?id=740652

Meanwhile, here's a hacky solution for those interested:

$(document).on("ready", function() {
    var $inputs = $("input");
    $inputs.off("click.trick");
    if (!sessionStorage.fixedChromeFocus) {
        sessionStorage.fixedChromeFocus = "true";
        $inputs.on("click.trick", function() {
            var win = window.open("/", "_blank");
            setTimeout(function() {win.close()}, 1);
            $inputs.off("click.trick");
        });
    }
  });

The goal is to, somehow, interact with the browser outside of the current page, to make it somehow lose focus. You cannot use JS to minimize browser, cannot resize it, cannot open dev tools. What you can do, though, is open a new window. Of course, if you open a new window immediately, a pop-up blocker (as most people have it) will block it and the window itself (or rather your current tab) won't lose focus. Opening a new window can only be done as a reaction to a user event (without triggering potential pop-up blocker).

I also use some browser detection so the code will only be executed for Chrome and, using server-side conditioning, only for builds that include basic auth. What the code does, quite self evidently, is that as soon as a user clicks on an input, it opens a new tab and quickly closes it, 1ms later. To prevent this from happening all the time, on every page load, sessionStorage, which gets cleared automatically after tabs from that domain are closed, is used (and we've already established that once focus starts working correctly, it will work as long as you keep your browser open).

The effect of this code is that the user will see a quick white flash the first time he clicks on the input, but everything will work correctly

本文标签： javascriptCan39t focus elements on load in Chromevery weird bug (in Chrome)Stack Overflow