search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Dropdown is positioned wrong with backdrop-blur-md on navbar #405

Closed fsmeier closed 1 month ago

fsmeier commented 4 months ago

Summary

If you use the dropdown together with backdrop-blur-md the dropdown is positioned wrong within the navbar.

Steps to Reproduce

  1. Use a navbar with dropdown, for example https://preline.co/examples/navigations-navbars.html#header-floating-dark
  2. Add backdrop-blur-md to the navbar element
  3. Dropdown menu is no longer positioned under the trigger-element

Demo Link

https://stackblitz.com/edit/preline-v2-astro-ljhc4h?file=src%2Flayouts%2FLayout.astro

Expected Behavior

The dropdown-menu should be positioned correctly (like without the backdrop-blur class)

Actual Behavior

The dropdown-menu is positioned wrongly when backdrop-blur-md is used.

Screenshots

Screenshot 2024-07-12 at 20 55 06 Screenshot 2024-07-12 at 20 49 10

olegpix commented 2 months ago

@fsmeier Hi, Internally we use Popper.js for positioning the dropdowns. We assume that Popper.js or similar positioning libraries often rely on the calculated position and dimensions of elements to calculate the popper placement. If the parent element has a backdrop-filter property, the browser may handle rendering of this element in a different layer, causing small shifts or miscalculations in how Popper.js interprets the position. We propose to use a separate element that will contain the necessary styles for such cases, and position it relative to the parent. I created a fork where I showed how this can be implemented.