Skip to content

[ui5-popover]: Popover width becomes misaligned with opener after resize or browser zoom #13863

Description

@dmitrykostenko

Bug Description

When a ui5-popover is opened from an element whose width changes (e.g. due to browser zoom), the popover's calculated width may differ from the opener by 1px or more. As a result, the left and/or right borders of the popover no longer align with the triggering element.

Affected Component

Popover

Expected Behaviour

The popover should always match the width of its opener so that the left and right borders remain perfectly aligned, regardless of:

  • viewport resizing,
  • responsive layout changes,
  • browser zoom level (50%–400%).

Isolated Example

https://ui5.github.io/webcomponents/play/#eNq9Vdtu2zgQ_RVGxQJ2YEkOugEWjm0s0vUCBYq0QLIPRdUHShxbbClSS1K-NMi_7wwl-ZK6bZ4WDuxw7nN4ZvgYSS1gm5S-UtHkMdK8gmhyLBxFhdEetEfx9CKOWa34bmVNo0W8NEqwOJ5nenrx1_s3Dx8_LBg5kYB-meJ6Ncsi0FmEsvYzLYELPDH8mzq_U0CHy4k2fjARsJQaxJA9okxIR8kmTBsNNyh4Iv-QIeiXxhYg4sIoY2MuvjTOn9iyadrH___TTSvwnBUltw48YvDPw9_xHwGGTkVQo3wtYVMb67OIdUCjcCOFL2cC1rKAOBxGTGrpJVexK7iC2VUy7oJ56THnPa9qBdO0PSHKaQcz_psbsWOhNAyd8-Jrd32hkwlbczuIY8fr273qDWmGXYI9aCEOIVGCXJXY_OvxuN4ekEpqU5s12Lhr5BTVpYJgS7-xkBYKL42eYNeqqTRpCFG53PXuqMJvsGcSLI1Bxfn430UJCUELUgYsJ-xqPP6NjlzJlY6lh8odZ6u5EFKvJmycXFuo2Pj8DZ-ZBsrTTkRr0sjrOG-8N5pJQeh7GoX3NWj2oe1lmh5s5genrtPWqzsgRUpj5TdsDHkQakflvbfgixKVBsOC7bMwIgBi5WFLlLqDjVPgCTbX5K6wsib80Q5bKKBqiXdrsI6KnKWAmFtrNv2oCrlmheLOHQrqMe6IQnUrnoOiUaGxr7hUb3XdELkt_NvgpQvmSrMJ1NPzBRm0AAS_fRRJTm3vJ0F6EldSx_1VXgcOdm2UeAcBggXdJQsJsLo2R4h6Wun8Dok0YW-XbGeaACDzJSABVoADxyqTSwUjxpFmXJkV25gGV14OPe1AJM_rTxGo7iIJMqcMAdsylob8GYS9Yn6OLoUyDjqi3AY5RhDg2ptfVHXJnfwGAt3v20vN4RmhTgpKj6hFS-LZaFfcriSOZICU-P4KmRSmLDeWuGS5kA2OShiITpYHyuw3YXctvx-thlc9mX8QKTfb2JVcmM0-SmelYIkDfFVvmTNKCqynKF4X_GBg20X0E4u-vHMmpyPNfvy84RIMA8P8rg78M6JRQIS0BR251MkXF4jWGoYNTKC2GzjtX8WfrozoadSHOnqLe8nxQ5xeHkehWWWXaaZlRS8Jy6IkPVK7piZxKBCb_t43VHDi_yfyJN1AXhiUaMzpkETOpx0V-1C_tG85-2LzdzREL7YOS6G3zjSi4zwjws7YpyRJhCka2mrJCvxChQXnbncPfHWHuA6y6DAlWTT8_Gn8-aaP0dP15XH2C7oPhPTzOsFnZLFG-3dYLq3mAU20LL5m0YgNhmw2p4nIfOedhPUzYxfHZ2Lp8CZ6evoPXrRm0w

Steps to Reproduce

  1. open a page containing a ui5-popover attached to an input or button. To make the issue clearly visible, add a 1px border to both the trigger element and the ui5-popover (e.g. border: 1px solid red;). Without visible borders, the 1px width difference can be difficult to notice.
  2. open the popover.
  3. apply zoom to the page (from 50% to 400%)
  4. Observe the left and right border alignment between the opener and the popover

Log Output, Stack Trace or Screenshots

Image

Priority

Medium

UI5 Web Components Version

2.23.3, 2.24.0

Browser

Chrome

Operating System

Windows

Additional Context

UDEx ticket: https://github.tools.sap/sapudex/digital-design-system/issues/3400

Organization

SAP UDEx

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugThis issue is a bug in the code

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions