#15342 new bug ()

Opened May 23, 2019 01:42PM UTC

Last modified May 24, 2019 07:39AM UTC

jQuery UI checkboxradio icon incorrect on back navigation

Reported by:	alstr	Owned by:
Priority:	minor	Milestone:	none
Component:	ui.checkbxoradio	Version:	1.12.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected:

https://i.stack.imgur.com/iabQj.png

Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS:

.ui-state-hover, .ui-widget-content .ui-state-hover {
    background-position-x: initial;
    background-position-y: initial;
}

This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon:

<label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">
    <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span>
    <span class="ui-checkboxradio-icon-space"> </span>
    14 Jan 2020 - 24 Mar 2020
</label>

I can get the icons to load correctly on initial load and back navigation by calling

$( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" )

immediately after creating them.

I have narrowed down the issue to it occurring in Chrome and Firefox (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog.

I can reproduce it in Chrome (current version 74.0.3729.169) and Firefox (current version 67.0) on macOS with the following minimal code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 1</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css">
    <script>
        $( document ).ready(function() {
            $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio();
            $( "#my-dialog" ).dialog();
        });
    </script>
</head>
<body>
    <div id="my-dialog">
        <label for="test">Test</label>
        <input type="checkbox" id="test" value="test">
        <a href="page-2.html">Next</a>
    </div>
</body>
</html>

Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 2</title>
</head>
<body>
    <p>Now navigate back.</p>
</body>
</html>

JSFiddle: https://jsfiddle.net/2dcy3jz5/2/

Originally asked at https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation.

Attachments (0)

Change History (3)

Changed May 23, 2019 01:59PM UTC by alstr comment:1

description:	When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation]. → When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation].

description:

When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation]. → When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation].

Changed May 23, 2019 02:05PM UTC by alstr comment:2

description:	When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation]. → When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) on macOS with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation].

description:

When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation]. → When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) on macOS with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation].

Changed May 24, 2019 07:39AM UTC by alstr comment:3

description:	When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) on macOS with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation]. → When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome and Firefox (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) and Firefox (current version 67.0) on macOS with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation].

description:

When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) on macOS with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation]. → When navigating away from a page containing checkboxradio widgets, then back using the browser back button, they all display the incorrect icon, and do not change when selected: \ \ https://i.stack.imgur.com/iabQj.png \ \ Looking at the web inspector, the background position for the icon is being overrode by the jQuery UI CSS: \ \ {{{ \ .ui-state-hover, .ui-widget-content .ui-state-hover { \ background-position-x: initial; \ background-position-y: initial; \ } \ }}} \ \ This is an example label, the only difference pre/post back navigation being ui-state-hover is set on the first span when I return to the page, which causes the incorrect icon: \ \ {{{ \ <label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active"> \ <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span> \ <span class="ui-checkboxradio-icon-space"> </span> \ 14 Jan 2020 - 24 Mar 2020 \ </label> \ }}} \ \ I can get the icons to load correctly on initial load and back navigation by calling \ {{{ \ $( ".ui-checkboxradio-icon" ).removeClass( "ui-state-hover" ) \ }}} \ immediately after creating them. \ \ I have narrowed down the issue to it occurring in Chrome and Firefox (not Safari) and when the checkboxradio widgets are within a jQuery UI dialog. \ \ I can reproduce it in Chrome (current version 74.0.3729.169) and Firefox (current version 67.0) on macOS with the following minimal code: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 1</title> \ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> \ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> \ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"> \ <script> \ $( document ).ready(function() { \ $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio(); \ $( "#my-dialog" ).dialog(); \ }); \ </script> \ </head> \ <body> \ <div id="my-dialog"> \ <label for="test">Test</label> \ <input type="checkbox" id="test" value="test"> \ <a href="page-2.html">Next</a> \ </div> \ </body> \ </html> \ }}} \ \ Where page-2.html is any old page that, when loaded, you navigate back to page-1.html from using the browser back button: \ \ {{{ \ <!DOCTYPE html> \ <html lang="en"> \ <head> \ <title>Page 2</title> \ </head> \ <body> \ <p>Now navigate back.</p> \ </body> \ </html> \ }}} \ \ JSFiddle: [https://jsfiddle.net/2dcy3jz5/2/] \ \ Originally asked at [https://stackoverflow.com/questions/56236771/jquery-ui-checkboxradio-icon-incorrect-on-back-navigation].

Search and Top Navigation

#15342 new bug ()

jQuery UI checkboxradio icon incorrect on back navigation

Description

Changed May 23, 2019 01:59PM UTC by alstr comment:1

Changed May 23, 2019 02:05PM UTC by alstr comment:2

Changed May 24, 2019 07:39AM UTC by alstr comment:3