I am unable to recreate this issue in a CodePen or JSFiddle so I have included the code necessary to reproduce the issue below.
Essentially, if I have a select field that is shifted (in my case to account for a sidebar), if the select allows multiples and I set at least one option to selected, the content starts at the left edge then redraws over to its shifted location. If the selected option is removed, the select renders in the correct place to start with. I also noticed that if you remove the multiple option, the presence of a selected option has no effect on the position--the select always starts at the edge and redraws toward its shifted position.
Finally, it seems this only happens with an external stylesheet. If the styles are embedded in the document it is not an issue (the select renders in the correct place from the start).
Can anyone point me what is happening here or how to correct it (without putting the styles right in the page, and without leaving the content to the left)?
The real code on my page is far more elaborate but this is the most concise I could make the code to still reproduce the issue. Only seems to happen in Chrome (I'm using 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;
}
Aucun commentaire:
Enregistrer un commentaire