MacOs Foundation Sticky/TopBar Stopped Working THIS Morning

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?

OK. I redid the top-banner div so that it’s id and class are not the same.

Before, it was defined as:

<div id="top-banner">
    <div class="top-banner">

And the sticky definition was;

<div data-sticky-container>
    <div data-sticky data-margin-top='0' data-top-anchor="top-banner:bottom">

And this seemed to cause the Safari freak-out. However, re’id’ing the first div to “the-top-banner” and changing the sticky definition to use the-top-banner fixed it.

This has to be a bug in Safari. If both were “id”, then ok, but “id” and “class”, it’s a bug.