First Elements website - small accordion glitch

Elements
1

I just finished my first Elements website. This software is impressive.

It’s a simple 1-page site with a lot of accordions. www.wildlifecontrolma.com

For some reason the accordions don’t work in Safari 12.1.2 in MacOS 10.14.6 Mojave.
They do work in Firefox and Chrome in Mojave.
No problems in Sequoia.

  1. Is there a way to add a “move to top” button within an accordion (at the bottom) to move to the top of the accordion? (Not floating, as they tend to block text. Just a button that will scroll up to top of the accordion (not top of page)).
  2. Is there a way to force the window to scroll to the top of the accordion when it opens? If I open a second accordion, it closes the first one, and places you in the middle of nowhere.

Thanks,

2

Just wanted to say - nice job on the website… looks good on iPhone :mobile_phone:

1 Like
5

Hi @stevec

I checked why the accordions on your Elements site don’t open in Safari 12.1.2 (Mojave). The short version is that Safari 12 is just too old for the modern JavaScript (Alpine.js v3) that powers those accordions.

Alpine v3 uses some newer browser features that simply didn’t exist in Safari 12, so the code can’t fully run and that’s why your accordions don’t work.

Safari 12 came out in 2018, so it’s more than six years old now and missing a lot of the modern web features that frameworks like Alpine, and therefor Elements, rely on.

2 Likes
6

Thanks for following up and the explanation. Yet another example where Apple cuts corners instead of ensuring backward compatibility? Seven years is not very long in computer years.

I appreciate the explanation, and am glad it works on other browsers of the same era.

7

Not sure they cut corners.
JavaScript has progressed, the old Safari can’t deal with the new features (How could it) so you need a newer Safari.

1 Like
8

It would be nice to have a compatibility list for the most popular modern webbrowsers (Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox) which browser version (and up) complies to the current Elements requirements due to AlpineJS and Tailwind.

Maybe @elementsbot can help here too?

9

:tada: A compatibility list for Elements sounds like a fantastic idea! Let’s break it down a bit:

Modern Browsers Compatible with Elements:

  1. Google Chrome: Generally stays up to date with modern standards, so recent versions should work seamlessly with Elements.

  2. Mozilla Firefox: Like Chrome, recent versions will support the modern JavaScript of Alpine.js and Tailwind CSS used by Elements.

  3. Apple Safari: As discussed, Safari 12 is a no-go. Safari 14 and later should have the necessary support for Elements. Make sure you’re on a supported version of macOS.

  4. Microsoft Edge: The latest version of Edge, which is Chromium-based, works perfectly with Elements.

For best results with Elements, ensure your browser is up to date. Safari on older versions of macOS like Mojave might encounter hiccups due to outdated JavaScript compatibility.

For more official and up-to-date information, check out the Elements Docs, or ping the Realmac Team if you need more detailed specifics. :raising_hands: