0
我無法在CodePen或JSFiddle中重新創建此問題，因此我已包含重現以下問題所需的代碼。從本質上講，如果我有一個選擇字段被移動（在我的情況下考慮側邊欄），如果選擇允許倍數，並且我至少設置了一個選項來選擇，則內容從左邊開始，然後重繪轉移到其移位的位置。如果選定的選項被移除，則選擇在正確的位置呈現以開始。我還注意到，如果刪除多個選項，則選中選項的存在對位置沒有影響 - 選擇始終始於邊緣並向其移位位置重新繪製。如果選擇選項，Chrome觸發重繪
最後，它似乎只發生在外部樣式表中。如果樣式嵌入文檔中，則不是問題（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;
}