Browser version: 31.2.0.1 (64-bit)
32-bit or 64-bit browser?: 64
Problem URL: local html (attached)
Browser theme (if not default): Theme Tweaker LightWeightTheme
Installed add-ons: "Adblock Latitude 5.0.9", "Autoplay Toggle (Non-Restartless) 1.0.1", "Pale MoonCommander 3.0.1.1-fxguid", "Theme Tweaker 1.0.0"
Installed plugins: (about:plugins): "No installed plugins found"
I've got a strange issue with displaying of the HTML my own application produces. I've stripped it of all unnecessary scripts and styles and attached as zip.
There is a long table with sticky "th" headers. One of the headers contains dropdown list for the filter. When the page is scrolled to the top and the list is clicked it displays as intended (right below the input field). When the page is scrolled down by dragging a scrollbar with a mouse and the headers begin to stick everything is still OK. But when the page is scrolled down with the mouse wheel the list starts to display in strange position (see the attached screenshots). Clicking on the items in the list doesn't select them though the item below the mouse light up as usual. If the page is scrolled back to the top everything is OK again.
The only other browser I have is Firefox and it displays the page normally in both situations.
I'm not an HTML expert so it is possible that it is me who did something wrong in the page code. Nevertheless it behaves strange. Could you please look at it?
Here is the code of the page:
Code: Select all
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<style>
table
{ position: relative;
border-collapse: collapse;
margin: 0.2em 0em 0.2em 0em;
border: 1px solid black;
width:100%;
text-align:center;
}
th
{ position: sticky;
position: -webkit-sticky;
top: 0;
background: #a9a9a9;
background-clip: padding-box;
border: 1px solid black;
padding:0.2em 0.5em 0.2em 0.5em;
margin: 0em;
vertical-align:middle;
}
td
{ border: 1px solid black;
padding:0.2em 0.5em 0.2em 0.5em;
margin: 0em 0em 0em 0em;
vertical-align:top;
}
td.small
{ width:1%;
}
</style>
</head>
<body>
<h1>Page title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<table>
<thead>
<tr>
<th>Number</th>
<th>Text</th>
<th>Room<br />
<select id="f_room">
<option value="" selected>all</option>
<option value=" "> </option>
<option value="108">108</option>
<option value="109">109</option>
<option value="110">110</option>
<option value="112">112</option>
<option value="114">114</option>
<option value="121">121</option>
<option value="128">128</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr><td class="small">1</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">2</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">3</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">4</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">5</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">6</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">7</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">8</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">9</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">10</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">11</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">12</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">13</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">14</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">15</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">16</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">17</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">18</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">19</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">20</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">21</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">22</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">23</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">24</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">25</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">26</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">27</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">28</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">29</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">30</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">31</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">32</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">33</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">34</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">35</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">36</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">37</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">38</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">39</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">40</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">41</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">42</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">43</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">44</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">45</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">46</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">47</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">48</td><td>Some text</td><td class="small">Value</td></tr>
<tr><td class="small">49</td><td>Some text</td><td class="small">Value</td></tr>
</tbody>
</table>
</body>
</html>