Opening a date picker in a window causes the window to jump in Safari

0 Answers 241 Views

DatePicker Window

Henrik asked on 28 Feb 2024, 11:03 AM | edited on 28 Feb 2024, 01:59 PM

Hi, in our team we had issues with a tricky bug that we discovered in Safari for Kendo UI for Angular.

Steps to reproduce

1. In Safari, make sure that content is scrollable by having content that does not fit in the current size of the browser window.

2. Open a kendo window over the content, with a kendo datepicker inside.

3. Possibly make the browser window smaller in height (depending on the screen resolution).

4. Open the datepicker popup.

Expected behaviour

Kendo window along with its content stay were it is.

Actual behaviour

The kendo window jumps upwards and is partially out of view.

If the page is still scrollable the user can scroll back to see all of the kendo window. For my team the problem was that we have an "overflow: hidden" css style on the body to prevent scrolling outside the kendo window when it is opened. This is problematic for the user since they cannot scroll back to see all the content of the kendo window. This problem only happens in Safari.

Solution

To solve it we set "position: fixed" on the wrapping element of the kendo window.

Stackblitz

https://stackblitz.com/edit/angular-p1tgbe-u8g3ff

Stoyan

commented on 04 Mar 2024, 08:41 AM | edited

Hi Henrik,

Thanks for the provided information details and snapshot.

Indeed, I've been able to reproduce the described behaviour and thus we will take it into account. What I will do as next steps is, I will take it up to the developers team to discuss the behaviour and try to pin point the problem, as its only reproducible in the Safari browser. When we do that, I'll log an issue in our public GitHub tracker so that its visible and trackable. For future references, when bumping on a bug, please refer to the public GitHub issue tracker and log them there. Thanks in advance.

Regards,
Stoyan
Progress Telerik