jQuery UI 后退导航中的复选框单选图标不正确

Question

我有几个简单的复选框，每个都转换为 jQuery UI checkboxradio:

$( document ).ready(function() {
    $( "#my-form" ).find( "input[type=checkbox]" ).checkboxradio();
}

我可以很好地选中和取消选中它们，它们按预期工作。

但是，当我转到另一个页面，然后通过按浏览器后退按钮 return 到带有 checkboxradio 小部件的页面时，它们都显示不正确的图标，并且没有更改选择时：

查看 Web 检查器，图标的背景位置被 jQuery UI CSS:

覆盖

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

被划掉的正确背景位置应该是（如果勾选的话）：

.ui-icon-check {
    background-position: -64px -144px;
    background-position-x: -64px;
    background-position-y: -144px;
}

这是一个示例 label，唯一的区别 pre/post 向后导航 ui-state-hover 设置在第一个 span 上，当我 return导致图标不正确的页面：

<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>

如何防止悬停 class 扭曲表单图标？我试过销毁并重新创建小部件无济于事。

编辑：

我已将问题缩小为发生在 Chrome（不是 Safari）中并且当 checkboxradio 小部件位于 jQuery UI [=24= 中时].

我可以使用以下最少的代码在 Chrome 中重现它：

<!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>

其中 page-2.html 是任何旧页面，加载后，您可以使用浏览器后退按钮导航回 page-1.html：

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

Answer 1

这是我看到的情况，当您导航离开时，元素是：

<span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked"></span>

当您导航 'back' 时，如果您检查它，您可以看到 ui-icon 的读取优先级高于 ui-icon-check，并且背景位置设置为 background-position: 0 0; 这是第一个图标精灵的位置。

我修改了加载顺序，每次它都会恢复背景位置。在 Windows.

上使用 Chrome 74（32 位）进行测试

我认为这是由于 Chrome 在内存中回读 DOM 的临时状态的方式所致。当您单击 Hyperlink 时，浏览器会跟随请求并开始呈现新的 HTML 或从缓存中读取它。我们假设当您单击 "back" 按钮时，Chrome 正在从缓存中加载内容或 re-reading HTML 来呈现它。 Class 属性在从缓存中读取时可能以不同的顺序读取，这可以解释为什么 ui-icon 优先于 ui-icon-check。

没有找到检验该理论的好方法。您可以尝试点击第 2 页，清除浏览器缓存，然后点击后退按钮。

我不知道你能不能克服这个问题。我通过添加自己的 Back link 进行了测试，效果更好。

页-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 1</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css">
    <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>
    <script>
        $(function() {
        $( "#my-dialog" ).dialog();
        $( "#test" ).checkboxradio();
        });
    </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>

页-2.html

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

希望对您有所帮助。

jQuery UI 后退导航中的复选框单选图标不正确

jQuery UI checkboxradio icon incorrect on back navigation

jquery

jquery-ui