Wrong position of dropdown list in sticky "th"

Users and developers helping users with generic and technical Pale Moon issues on all operating systems.

Moderator: trava90

Forum rules
This board is for technical/general usage questions and troubleshooting for the Pale Moon browser only.
Technical issues and questions not related to the Pale Moon browser should be posted in other boards!
Please keep off-topic and general discussion out of this board, thank you!
User avatar
rochinaa
New to the forum
New to the forum
Posts: 2
Joined: 2022-08-27, 13:24

Wrong position of dropdown list in sticky "th"

Unread post by rochinaa » 2022-08-27, 14:08

Operating system: Windows 8.1 (also WIndows 10)
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>
The output of help->troubleshooting information:
Application Basics
------------------

Name: Pale Moon
Version: 31.2.0.1 (64-bit)
Build ID: 20220803131453
Update Channel: release
User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:68.0) Gecko/20100101 Goanna/5.2 Firefox/68.0 PaleMoon/31.2.0.1
OS: Windows_NT 6.3
Safe Mode: false

Extensions
----------

Name: Adblock Latitude
Version: 5.0.9
Enabled: true
ID: adblocklatitude@addons.palemoon.org

Name: Autoplay Toggle (Non-Restartless)
Version: 1.0.1
Enabled: true
ID: autoplay-toggle@lakora.us

Name: Pale Moon Commander
Version: 3.0.1.1-fxguid
Enabled: true
ID: commander@palemoon.org

Name: Theme Tweaker
Version: 1.0.0
Enabled: true
ID: {d9990772-0e04-4731-b98e-98e62085837f}

Graphics
--------

Features
Compositing: Direct3D 11
GPU Accelerated Windows: 5/5 Direct3D 11 (OMTC)
Asynchronous Pan/Zoom: none
WebGL 1 Driver WSI Info: EGL_VENDOR: Google Inc. (adapter LUID: 0000000000007dc1) EGL_VERSION: 1.4 (ANGLE 2.1.0.) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture_nv12 EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
WebGL 1 Driver Renderer: Google Inc. -- ANGLE (NVIDIA GeForce GTX 1050 Ti Direct3D11 vs_5_0 ps_5_0)
WebGL 1 Driver Version: OpenGL ES 2.0 (ANGLE 2.1.0.)
WebGL 1 Driver Extensions: GL_OES_element_index_uint GL_OES_packed_depth_stencil GL_OES_get_program_binary GL_OES_rgb8_rgba8 GL_EXT_texture_format_BGRA8888 GL_EXT_read_format_bgra GL_NV_pixel_buffer_object GL_OES_mapbuffer GL_EXT_map_buffer_range GL_EXT_color_buffer_half_float GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_float GL_OES_texture_float_linear GL_EXT_texture_rg GL_EXT_texture_compression_dxt1 GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_OES_compressed_ETC1_RGB8_texture GL_EXT_sRGB GL_ANGLE_depth_texture GL_OES_depth32 GL_EXT_texture_storage GL_OES_texture_npot GL_EXT_draw_buffers GL_EXT_texture_filter_anisotropic GL_EXT_occlusion_query_boolean GL_NV_fence GL_EXT_disjoint_timer_query GL_EXT_robustness GL_EXT_blend_minmax GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_pack_reverse_row_order GL_OES_standard_derivatives GL_EXT_shader_texture_lod GL_EXT_frag_depth GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_EXT_discard_framebuffer GL_EXT_debug_marker GL_OES_EGL_image GL_OES_EGL_image_external GL_NV_EGL_stream_consumer_external GL_EXT_unpack_subimage GL_NV_pack_subimage GL_OES_vertex_array_object GL_KHR_debug GL_ANGLE_lossy_etc_decode GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_sync_query GL_CHROMIUM_copy_texture
WebGL 1 Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query MOZ_debug_get OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_etc1 WEBGL_compressed_texture_s3tc WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc MOZ_WEBGL_depth_texture
WebGL 2 Driver WSI Info: EGL_VENDOR: Google Inc. (adapter LUID: 0000000000007dc1) EGL_VERSION: 1.4 (ANGLE 2.1.0.) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture_nv12 EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
WebGL 2 Driver Renderer: Google Inc. -- ANGLE (NVIDIA GeForce GTX 1050 Ti Direct3D11 vs_5_0 ps_5_0)
WebGL 2 Driver Version: OpenGL ES 3.0 (ANGLE 2.1.0.)
WebGL 2 Driver Extensions: GL_OES_element_index_uint GL_OES_packed_depth_stencil GL_OES_get_program_binary GL_OES_rgb8_rgba8 GL_EXT_texture_format_BGRA8888 GL_EXT_read_format_bgra GL_NV_pixel_buffer_object GL_OES_mapbuffer GL_EXT_map_buffer_range GL_EXT_color_buffer_half_float GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_float GL_OES_texture_float_linear GL_EXT_texture_rg GL_EXT_texture_compression_dxt1 GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_OES_compressed_ETC1_RGB8_texture GL_EXT_sRGB GL_ANGLE_depth_texture GL_OES_depth32 GL_EXT_texture_storage GL_OES_texture_npot GL_EXT_draw_buffers GL_EXT_texture_filter_anisotropic GL_EXT_occlusion_query_boolean GL_NV_fence GL_EXT_disjoint_timer_query GL_EXT_robustness GL_EXT_blend_minmax GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_pack_reverse_row_order GL_OES_standard_derivatives GL_EXT_shader_texture_lod GL_EXT_frag_depth GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_EXT_discard_framebuffer GL_EXT_debug_marker GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_NV_EGL_stream_consumer_external GL_EXT_unpack_subimage GL_NV_pack_subimage GL_EXT_color_buffer_float GL_OES_vertex_array_object GL_KHR_debug GL_ANGLE_lossy_etc_decode GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_sync_query GL_CHROMIUM_copy_texture GL_EXT_texture_norm16
WebGL 2 Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query MOZ_debug_get OES_texture_float_linear WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_compressed_texture_s3tc WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc
Hardware H264 Decoding: Yes; Using D3D11 API
Audio Backend: wasapi
Direct2D: true
DirectWrite: true (6.3.9600.20139)
GPU #1
Active: Yes
Description: NVIDIA GeForce GTX 1050 Ti
Vendor ID: 0x10de
Device ID: 0x1c82
Driver Version: 25.21.14.1735
Driver Date: 12-11-2018
Drivers: nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
Subsys ID: 33511462
RAM: 4096

Diagnostics
AzureCanvasAccelerated: 0
AzureCanvasBackend: direct2d 1.1
AzureContentBackend: direct2d 1.1
AzureFallbackCanvasBackend: cairo





Important Modified Preferences
------------------------------

accessibility.typeaheadfind.flashBar: 0
browser.cache.disk.capacity: 358400
browser.cache.disk.smart_size.first_run: false
browser.display.use_document_fonts: 0
browser.download.folderList: 2
browser.download.importedFromSqlite: true
browser.link.open_newwindow: 2
browser.places.smartBookmarksVersion: 4
browser.search.update: false
browser.startup.homepage: file:///D:/Work/Bookmarks/bookmarks.htm
browser.startup.homepage_override.buildID: 20220803131453
browser.startup.homepage_override.mstone: 5.2.0
browser.tabs.autoHide: true
browser.tabs.warnOnClose: false
browser.tabs.warnOnCloseOtherTabs: false
browser.zoom.full: false
dom.disable_window_status_change: true
extensions.lastAppVersion: 31.2.0.1
general.autoScroll: false
general.useragent.updates.lastupdated: 1661534621566
gfx.crash-guard.d3d11layers.appVersion: 31.2.0.1
gfx.crash-guard.d3d11layers.deviceID: 0x1c82
gfx.crash-guard.d3d11layers.driverVersion: 25.21.14.1735
gfx.crash-guard.d3d11layers.feature-d2d: true
gfx.crash-guard.d3d11layers.feature-d3d11: true
gfx.crash-guard.status.d3d11layers: 2
gfx.crash-guard.status.d3d11video: 2
image.animation_mode: none
keyword.enabled: false
media.autoplay.allowscripted: false
media.autoplay.enabled: false
media.benchmark.vp9.fps: 179
media.benchmark.vp9.versioncheck: 3
media.block-play-until-visible: true
media.hardware-video-decoding.failed: false
network.cookie.prefsMigrated: true
places.database.lastMaintenance: 1661360626
places.history.expiration.transient_current_max_pages: 122334
privacy.clearOnShutdown.connectivityData: true
privacy.clearOnShutdown.offlineApps: true
privacy.clearOnShutdown.passwords: true
privacy.GPCheader.enabled: true
privacy.sanitize.migrateFx3Prefs: true
privacy.sanitize.sanitizeOnShutdown: true
security.disable_button.openCertManager: false
services.sync.declinedEngines:
storage.vacuum.last.index: 1
storage.vacuum.last.places.sqlite: 1660415832
ui.osk.debug.keyboardDisplayReason: IKPOS: Touch screen not found.

Important Locked Preferences
----------------------------

Places Database
---------------

JavaScript
----------

Incremental GC: true

Accessibility
-------------

Activated: false
Prevent Accessibility: 1

Library Versions
----------------

NSPR
Expected minimum version: 4.25
Version in use: 4.25

NSS
Expected minimum version: 3.52.8
Version in use: 3.52.8

NSSSMIME
Expected minimum version: 3.52.8
Version in use: 3.52.8

NSSSSL
Expected minimum version: 3.52.8
Version in use: 3.52.8

NSSUTIL
Expected minimum version: 3.52.8
Version in use: 3.52.8
Attachments
Test.zip
HTML in question
(865 Bytes) Downloaded 3 times
Wrong display (example 1)
Wrong display (example 1)
Wrong display (example 2)
Wrong display (example 2)

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35478
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Wrong position of dropdown list in sticky "th"

Unread post by Moonchild » 2022-08-27, 17:31

I tested both scrolling with the scrollbar and scrolling with the mouse wheel on the attached test case on Windows 10, but everything works normally. The header sticks and the select item remains functional and correctly positioned. So it doesn't seem to be something obvious (although I could imagine corner case use like this being weird and needing some tweak - sticky contexts are tricky in the layout engine; normally sticky headers aren't used to put form elements in... but that wasn't actually an issue as far as I can tell)

I even double-checked with autoscrolling off as you have set in your browser; still works.

So, I'm not sure what is going on here for you.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
rochinaa
New to the forum
New to the forum
Posts: 2
Joined: 2022-08-27, 13:24

Re: Wrong position of dropdown list in sticky "th"

Unread post by rochinaa » 2022-08-27, 19:22

Thank you for testing. You're right, it is the corner case and I doubt that it will affect many users. Well, let it be then.

It's strange that I have the same issue on three different computers though (just tested it on Debian/Xfce, results are the same). The only thing they have in common is me, so maybe this is source of the problem :)

Locked