When using Safari, I have noticed that my styles are applied correctly upon page load for any screen size. However, if I resize the window from desktop to mobile and back again, the desktop styles do not get applied. To see this behavior in action, simply open the site in Safari 13 at desktop size, observe the layout, resize the browser to mobile, and then back to desktop. You can also start by loading the site in mobile view and widening the window.
For a test case, visit:
Expected behavior (on load):
https://i.sstatic.net/pHp1a.png
After resizing the browser (Safari 13 only):
https://i.sstatic.net/vyj6B.png
Upon inspecting the menu elements, you will notice that styles-l.css and navigation-desktop.css are applied. However, these style sheets do not apply after resizing the window back to desktop size.
It is important to note that this issue does not seem to be related to JavaScript, as disabling JavaScript does not prevent the behavior.
Key points to remember:
- This issue is specific to Safari 13. Other versions of Safari and other browsers such as Chrome, Firefox, and Edge do not exhibit this behavior.
- While I have only experienced this on desktop, it may also impact mobile devices, although I have been unable to replicate it on smaller breakpoints.
- The initial page load always displays correctly.
- The problem occurs when the window is resized beyond the mobile breakpoint.
- Safari seems to stop applying the entire styles-l.css file after resizing the window.
- This behavior persists even with JavaScript disabled.
This issue seems to be quite rare, as extensive searching has not revealed similar occurrences. However, it is affecting multiple sites that I am currently working on. Interestingly, if you manually edit the parameters of a media query in the inspector, Safari will instantly refresh the page with the correct layout.