So, Apple pushed an update (Catalina 10.15.16) down last night and this morning Safari has stopped display my (in-development) Foundation-based site correctly. A quick check in Firefox and Chrome/Brave shows the page displayed correctly.
What is happening? On my page, I have a basic layout of a responsive 32x9 banner at the top (div background-image, some text on top, a gradient in :before). Directly beneath the banner is a sticky topbar menu section that is fixed the bottom of the top banner (id=top-banner). When the user scrolls up, the topbar menu section affixes to the top of the screen.
Pretty normal stuff. Worked in Safari/Chrome/Brave/Firefox before I went to bed last night.
This morning, however, Safari has decided to not display the top banner div at all and the stick topbar is already stuck to the top (it displays and works correctly still in Firefox/Chrome/Brave). This has to do with some interaction with the sticky container.
If I rename the top banner id (from top-banner to the-top-banner), thus breaking the sticky data-top-anchor, the banner re-appears in Safari, with the topbar menu below. But, of course, I have also disabled sticky-ness.
Apple pushed an update to Catalina last night, so my system has changed. Literally, I went to bed and got up and reloaded my development website to find it “not working”.
Has anyone else seen this?