Incorrect positioning of overlay using horizontalOffset and verticalOffset when body overflows viewport.

[Mehuge]

Version

v2.3.4 of iron-overlay-behaviour.

Description

Using iron-overlay-behaviour to implement a right click (context) menu. The menu is to be displayed at the position the user right clicked. The position is being incorrectly calculated when the body overflows the viewport and the position of the right click is such that the menu would extend beyond the right edge or bottom edge of the viewport.

Expected outcome

The menu should be displayed at or as close as possible to the position specified by horizontalOffset and verticalOffset.

Actual outcome

The menu is displayed near the top or left of the viewport well away from where the click occurred.

Live Demo

iron-overlay-behavior-bug.zip

Steps to reproduce

bower install
polymer serve --open

Size browser window so red box overflows the viewport (ie less than 800x800 pixels).
Right click near left top, overlay shows in correct position.
Right click towards the right or bottom edges, the overlay shows in an incorrect position.

Browsers Affected

• Chrome
• Firefox
• Safari 14

(not tested others)

Screen Recording of the behaviour

Screen.Recording.2021-09-03.at.16.42.59.mov