Hiding mechanism like rvt-sr-only causes rendering/clipping issues with flex box

[johglove]

The use of position: absolute for hiding elements appears to cause conflicts with flex box that can result in elements not showing on the screen. Issue has appeared with multiple elements that use the current hiding practice such as the class rvt-sr-only, checkbox and radio button.

Basic situation the issue has been seen in is when a page has screen hidden elements within a flex box container and the screen has content outside the view window. When a focus mechanism such as href='#ID' or element.focus() is used the page will rerender with the element in view and focus but other sections outside the affected flex container will no longer be displayed by the browser; view window appears restricted to flex container. Investigation will show the missing elements in the page DOM with correct calculated values (height, width, etc) but they appear like they are clipped or rendered outside the view port. Removing the flex box styling from the container will cause the missing elements to reappear as will removing position: absolute from the hidden element (or wrapping it in a position: relative).

Current work around for this is to wrap hidden elements in position: relative. In some case such as checkbox and radio buttons the input has completely hidden using display: none. Both of these workarounds have issues such as loss of accessibility or effects on the page visuals and interactions (such as described in #463 and #464).