[flyout] action button area height larger when address bar/area collapses

[jamessampford]

Bug Report

The area where the action buttons are appears larger than it should if scrolled on the page causing the address bar to collapse. Presumably a listener isn’t triggering adjusting calculations for the height/position. Rotating the device from landscape to portrait does not correct the issue

Steps to reproduce

1. Go to https://fomantic-ui.com/modules/flyout.html
2. Go down the page so the address bar collapses
3. Open any flyout with action buttons

Expected result

To look the same as when the address bar is not collapsed

Actual result

The area is about the height of the address bar larger

Screenshot

Version

2.9.0

[lubber-de]

Safari , or Mac/iOS does not seem to adjust the internal viewheight, because the content is calculated as 100vh - xx.rem
Whenever the addressbar collapses, 100vh seems to still refer to the previous internal value, although the actual vh is effectively larger. I would consider this a Safari / Mac/iOS bug
Unfortunately there also does not seem to exist any event which is triggered when the address bar collapses (resize doesnt), so we cannot detect if/when the bar expands/collapses

[lubber-de]

@prudho Do you remember, why you used 100vh instead of 100% ? I have to test if this fixes it, buy maybe you already stumbled upon that when you created the module and intentionally decided to use 100vh

[prudho]

Unfortunately I don't remember why I used 100vh instead of 100%. I guess it's because the viewport can be smaller than the parent div but i'm not sure if it was important anymore after some fix 🤔