Customize: Mobile preview button position moves when opening panel and falls out of place in Safari 375px viewport

[westonruter]

I don't think the Preview button should be shifting position. In Safari the shifting position then also causes it to fall out of the customize-header-actions when a panel is open.

Demo video: ​https://youtu.be/pXcS_65BTak

[westonruter]

@sayedwp Any ideas on this one?

[sayedwp]

Have not seen that before, I will check when I am back on my desk tomorrow.

[Mahvash Fatima]

I think this issue started after we tried to add animation to those header buttons by overriding position: absolute . I saw one more issue with animation that the preview button was going away diagonally. Please see if my patch fixes the issue.

[sayedwp]

@Mahvash Fatima Awesome, thanks for participating, I think that was the issue, the patch looks good to me 👍
Tested and is working fine on safari and firefox as well. Lets wait for @westonruter 's feedback.

[westonruter]

@sayedwp @Mahvash-Fatima The selector *:not(.customize-controls-close) I expect to be very expensive. Can that be left unchanged?

[Mahvash Fatima]

Sure, please find attached patch.

[westonruter]

Works great!

[westonruter]

In 41853:

Customize: Fix positioning of Preview button in mobile.

Props Mahvash-Fatima.
Fixes #42172.