Question

我无法在CodePen或JSFiddle中重新创建此问题，因此我已经包含了重现此问题所需的代码。

基本上，如果我有一个被移位的选择字段（在我的情况下是为了考虑侧边栏），如果select允许多个并且我设置了至少一个选项，则内容从左边缘开始然后重绘到它的转移位置。如果删除了所选选项，则选择将在正确的位置呈现以开始。我还注意到，如果删除多个选项，则所选选项的存在对位置没有影响 - 选择始终从边缘开始并重新绘制到其移位位置。

最后，似乎这只发生在外部样式表中。如果样式嵌入在文档中，则不是问题（选择从一开始就在正确的位置呈现）。

有人能指出我在这里发生了什么或如何纠正它（没有将样式放在页面中，而不将内容留在左边）？

我页面上的真实代码更加精细，但这是我能够使代码仍能重现问题的最简洁。似乎只在Chrome中发生（我正在使用v51）

的index.htm

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Test</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <select multiple>
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
        <option value="test3" selected>Test 3</option>
        <option value="test4">Test 4</option>
    </select>
</body>
</html>

styles.css的

select {
    -webkit-transition: all 5s ease;
    -o-transition: all 5s ease;
    transition: all 5s ease;
    margin-left: 200px;
}

Answer 1

这是Chrome中的一个错误。不知道它有多远，但至少在Chrome v51中它似乎是一个问题。

https://bugs.chromium.org/p/chromium/issues/detail?id=620408

如果选择了选项，Chrome会触发重绘

1 个答案: