Position sticky not working on windows

programming web dev
1

I have got a “position: sticky” element. It works on MacOS (tested on my machine in Chrome, Safari and Arc). However; I noticed it does not stick on the client’s machine. So I booted up LambdaTest and tried it with Chrome, Edge and Firefox on Windows 11 - not sticky.
Any ideas of why this might be working on my MacOS machine but not on Windows?

This is my HTML:

<div class="row d-flex flex-row flex-nowrap" phx-hook="SortableOrderHook">  
   <div class="estimate-list-queue sortable column-wrapper">  
     <!-- sticky inner -->  
   </div>  
</div>

CSS:

.estimate-list-queue {
   position: sticky;
   top: 30px;
   height: 80vh;
   min-width: 14rem;
   max-width: 14rem;
}

(if you’ve seen this before- I posted on Reddit before realizing the Kirupa community is way better at this sort of thing)!

1 Like
2

if you move your estimate-list-queue class to the wrapping row element, does that make a difference?

According to this article setting sticky on an element sets it’s parent as the sticky-container. The sticky feature may or may not work if there is only a single element inside the sticky container:

when an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick.

When you define an element with position: sticky you’re automatically defining the parent element as a sticky container

This I think, is assuming you want your row element to stay sticky in place with your column-wrapper element

3

@kdub1312 thanks for the thoughts.
It turns out we are using an older version of Material Dashboard as the template for this project, they have a class on main, .ps-container which was setting overflow: hidden !important;. This is for the MDB plugin “Perfect Scrollbar”, I’m not entirely sure how important it is but removing it gets this working. Odd that it worked on MacOS but not Windows tho.

1 Like
4

interesting, glad to hear you got it worked out!

5

If the position: sticky CSS property is not working as expected on Windows, there are several potential reasons and solutions to consider:

  1. Browser Compatibility:
    Ensure that the browser you are using supports the position: sticky property. Most modern browsers support it, but if you are using an outdated browser, consider updating to the latest version.

  2. Doctype Declaration:
    Ensure that your HTML document includes a proper doctype declaration. This can impact how browsers interpret and render styles. Include the following at the beginning of your HTML document:

    <!DOCTYPE html>

  3. Height of Container:
    The position: sticky property relies on the height of the containing element. Make sure the element with position: sticky has a defined height or is within a container with a defined height.

  4. Z-Index Issues:
    Check if there are any other positioned elements with a higher z-index that might be overlapping the sticky element. Adjust the z-index values accordingly.

  5. Overflow Property:
    Ensure that the parent element of the sticky element has an overflow property other than visible. A parent with overflow: hidden may cause issues.

  6. Browser Extensions:
    Some browser extensions can interfere with the rendering of web pages. Try disabling extensions one by one to see if any are causing the problem.

  7. GPU Acceleration:
    Browser rendering issues might be related to GPU acceleration. Try toggling GPU acceleration in your browser settings to see if it makes a difference.

  8. Windows Scaling:
    High-DPI scaling on Windows can sometimes affect the rendering of web pages. Right-click on the browser executable, go to “Properties,” and under the “Compatibility” tab, try disabling display scaling on high DPI settings.

  9. Browser DevTools:
    Use the browser’s developer tools (F12) to inspect the element and see if there are any errors or conflicting styles in the console or styles panel.

  10. Testing on Different Browsers:
    Test your page on different browsers (Chrome, Firefox, Edge, etc.) to see if the issue persists across all browsers. This can help determine if the problem is browser-specific.