elementor
[🧐 Evaluating] 🐞 Bug report: Use of optional chaining (?. operator) breaks JS in iOS < 13.4
Prerequisites
- [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.
Description
When opening an Elementor page on iOS 12.5.5 (iPhone 6) I get the following JS error:
unexpected token '.' (frontend.min.js)
This seems to be related to the use of optional chaining (?. operator).
The caniuse for this feature shows that this was only added two years ago. Is Elementor really deprecating 2 year old browsers? https://caniuse.com/mdn-javascript_operators_optional_chaining
Steps to reproduce
- Create a page using an up-to-date elementor
- Open it on an iOS 12 device
Isolating the problem
- [X] This bug happens with only Elementor plugin active (and Elementor Pro).
- [X] This bug happens with a Blank WordPress theme active (Hello theme).
- [X] I can reproduce this bug consistently using the steps above.
System Info
== Server Environment == Operating System: Linux Software: Apache MySQL version: Ubuntu 20.04 v10.3.34 PHP Version: 8.0.20 PHP Memory Limit: 128M PHP Max Input Vars: 1000 PHP Max Post Size: 50M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected
== WordPress Environment == Version: 6.0 Site URL: https://### Home URL: https://### WP Multisite: No Max Upload Size: 50 MB Memory limit: 40M Max Memory limit: 256M Permalink Structure: /%postname%/ Language: de-DE Timezone: Europe/Berlin Admin Email: ### Debug Mode: Inactive
== Theme == Name: Hello Elementor Child Version: 1.0.1 Author: Elementor Team Child Theme: Yes Parent Theme Name: Hello Elementor Parent Theme Version: 2.5.0 Parent Theme Author: Elementor Team
== User == Role: administrator WP Profile lang: de_DE User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
== Active Plugins == Advanced Custom Fields PRO Version: 5.12.2 Author: Delicious Brains
Custom Post Type UI
Version: 1.12.1
Author: WebDevStudios
Duplicator
Version: 1.4.7
Author: Snap Creek
DynamicConditions
Version: 1.6.0
Author: RTO GmbH
Elementor
Version: 3.6.7
Author: Elementor.com
Elementor Pro
Version: 3.7.2
Author: Elementor.com
Imagify
Version: 1.10
Author: WP Media
Index WP MySQL For Speed
Version: 1.4.4
Author: Oliver Jones, Rick James
JetElements For Elementor
Version: 2.6.6
Author: Crocoblock
Safe SVG
Version: 2.0.2
Author: 10up
tc Elements
Version: 1.1.7
Author: ---
Yoast Duplicate Post
Version: 4.5
Author: Enrico Battocchi & Team Yoast
== Elementor-Experimente == Optimierte DOM Ausgabe: Aktiv Verbessertes Laden von Assets: Aktiv Verbessertes Laden von CSS: Aktiv Inline-Schriftarten-Symbole: Standardmäßig deaktiviert Verbesserungen der Zugänglichkeit: Standardmäßig aktiviert Vorlagen Kit importieren / exportieren: Standardmäßig aktiviert Zusätzliche benutzerdefinierte Breakpoints: Inaktiv Native WordPress-Widgets aus den Suchergebnissen ausblenden: Standardmäßig aktiviert : Standardmäßig deaktiviert Flexbox Container: Standardmäßig deaktiviert Default to New Theme Builder: Standardmäßig aktiviert Hello Theme Header & Footer: Standardmäßig aktiviert Startseiten: Standardmäßig aktiviert Farbpalette: Standardmäßig aktiviert Bevorzugte Widgets: Standardmäßig aktiviert Admin Leiste: Standardmäßig aktiviert Page Transitions: Standardmäßig aktiviert Notes: Standardmäßig aktiviert Form Submissions: Standardmäßig aktiviert Scroll Snap: Aktiv
== Elementor - Compatibility Tag ==
Elementor Pro: Kompatibel
JetElements For Elementor: Unkompatibel
== Elementor Pro - Compatibility Tag ==
JetElements For Elementor: Unkompatibel
This seems to be related to the use of optional chaining (?. operator).
How do you know it's because optional chaining?
I debugged the iPhone 6 in question using a de-minified (--> autoformatted via IntelliJ) version of frontend.min.js (to see which line it fails on) and it failed on the first line that used optional chaining with the following error message:
unexpected token '.'
Which would make sense if it doesn't understand the '?' that precedes the dot.
@rami-elementor Can you please take a look at this issue? It completely breaks some Elementor features like popups since it stops js execution.
+1 on this. I'm running a WooCommerce site which uses tabs for the shop page, this bug prevents the products within the tabs from displaying therefore customers are unable to add items to cart. Also the mini cart widget fails to open. Thankfully most users are running up to date iOS/macOS versions so isn't a massive deal but would be great to have it fixed for those older devices.
It seems this would be one good reason to not upgrade the Elementor and Pro plugins. Thank you for the tech. details.
Ok, now I know the reason why several widgets stopped working on old devices like iPhone6. And they are basic widgets like accordion and toggle, video widgets with an image overlay,... or any entrance animation,... (I also see that pro features like popup also stopped working... and also the sticky option...). https://github.com/elementor/elementor/issues/19358
We checked the issue, the conclusion is that Elementor supports Safari >= 14.
The issue accrues in old browsers and old devices. We no longer support iPhone 6 (released in 2014) or other other old devices.
Supporting older devices and browser requires more code, this impacts site performance.
It's a simple choose between performance enhancement for majority of Elementor users and support for legacy browsers for a shrinking minority using old devices.
Safari 14, which was out about two years ago? There are a whole lot of people with software, devices or computers older than a couple years ago.
This is unfortunate because as you can see here, many people are using mobile devices that aren't the latest generation. That is really problematic if a plugin that powers a good portion of the web's layout system breaks on all older devices.
From a visitor / non editor / front-end perspective:
Apple has supported iOS 12 with a release less than a year ago, September 23, 2021. iOS 12 was released to the public on September 17, 2018.
They seem to go further in supporting 7th gen devices with 15.6 being the last release to support some models, released on July 20, 2022.
10th generation / 7 phones were released with iOS 10.0.1 so to suggest the support for this should be model based doesn't quite fit.
Sort of sounds like there was a mistake in the immediate retirement of this & should have been pushed out further or in an adjacent fashion as Apple seems to give indication that there are many such users on these devices as they have very recent releases to allow their users time to change to newer versions.
I mean the elements using a motion animation just not showing seems like a pretty glaring issue, can there at the very least be a fallback added where animations are ignored on those older devices so that the site is still somewhat usable/readable vs completely blank?
Critical widgets such as the nav menu & cart are affected when moving past 3.6.5 Pro & 3.6.6 Free.
I assume 3.7.5 hasn't fixed this?
No, they think that no one needs it.... And the fact that there are a lot of old devices in circulation, they don’t care.
@rami-elementor my understanding of the required code for compatibility is very limited but is this something that users could opt into? Perhaps an option in Elementor>Tools to include compatibility with older browsers/devices?
@rami-elementor This is unacceptable and needs to be fixed by Elementor... Businesses with Elementor sites are likely suffering, because a good number of people have older phones, and Elementor has decided to stop supporting them... without telling us. We may have to leave Elementor and switch to Kadence or something similar if this is not fixed.
Still not fixed in 3.8.1
It is sad....
@rami-elementor , сan you solve the compatibility problem? Because of this, many people cannot use the latest version of elementor and are forced to stick with the old one.
I still cannot understand how it was possible to throw out devices from support, of which there are still many. And they don't have the option to upgrade to the latest ios version.
Hello @GnoW013!
Thank you for reaching out! 🙏
Please allow me some time to investigate it, and get back to you with my findings. 🧐
Best regards
Do we have an update/schedule for this yet? Clients are concerned that it's not working on their devices, specifically iPad Mini with Safari.
While there is no fix, any ideas of how we can use this as a workaround, if at all possible? https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
@nicholaszein
Hello @GnoW013!
Thank you for reaching out! 🙏
Please allow me some time to investigate it, and get back to you with my findings. 🧐
Best regards
Hi @nicholaszein,
Any feedback on this?
Thank you Dennis
@nicholaszein @rami-elementor
Asked several weeks for feedback, would appriciate if you could revert on this.
Thank you!
Hello, everyone,
Thank you for being so patient. 🙏
⛔ After much consideration, we concluded we won't be supporting older versions of Safari below version 14.
These versions don't support key software technologies required to run Elementor. We are always aiming to push forward with the latest internet standards and these older browser versions are heavily lacking in this department.
We understand this might be frustrating and we are very sorry for the inconvenience. But in order to improve on capabilities and performance, we need to drop support for older browsers and focus on the current internet standards.
This is our final decision.
To learn more about Elementor's Requirements, and browser support, please read this article: https://elementor.com/help/requirements/
Kind regards