Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Old browser support issues, especially iOS/Safari #10

Open
sidewayss opened this issue Oct 26, 2024 · 0 comments
Open

Old browser support issues, especially iOS/Safari #10

sidewayss opened this issue Oct 26, 2024 · 0 comments
Labels
2029 Wait until 2029 to do it

Comments

@sidewayss
Copy link
Owner

sidewayss commented Oct 26, 2024

This issue is open as a reminder to consider eliminating some of these backwards compatibility workarounds. The numbered list is in reverse historical order, most recent to oldest.

Number 8 is the reason that backwards compatibility is stuck at iOS/Safari 12.2. There is a workaround, but it requires a change to the template structure and the way that structure is parsed. The two structures are not compatible, so I'll wait to see if anyone needs iOS 11 or 10 support. The limit is iOS 10.3, the first release to support custom HTML elements. Support for iOS 12 goes all the way back to iPhone 5s, which is the first 64bit iPhone, so I'm hoping this is not a serious issue for anyone.

Numbers 1, 5, and 7 occur a total of five times, all in the apps, not in the library itself. I worked around them all in-place. Babel uses polyfills for these and I'd rather avoid that. The six workarounds are tiny.

Numbers 2, 3, and 4 are transpiled by Babel. See the babel.config.json file in the root folder of the repo.

Number 6 is a template SVG/CSS issue that the built-in template works around. The CSS is up to you, as is the template file in the end.

  1. Array.prototype.at() - iOS 15.4. Thankfully it's only in the one test app. Worked around manually. Commented with //@
  2. static class fields - iOS 14.5. Even observedAttributes had to be moved outside the class. See the lines of code immediately following the class declarations for the workaround, for example:
    BaseElement.observedAttributes = [DISABLED, TAB_INDEX];
    I've commented those and other related lines with //$
  3. ?? nullish coalescing assignment operator - iOS 14. New function in base-element.js: nullish(). Commented with //??
  4. ?. optional chaining operator - iOS 13.4. Easy to work around. Commented with //?.
  5. String.prototype.replaceAll()- iOS 13.4. Twice in apps/common.js and once in the input-num app. Worked around in-situ with replace(/"old"/g, "new");. Commented with //&
  6. part and ::part - iOS 13.4. Added to templates: built-in styles that you can override with ::part.
  7. Array.prototype.flat() - iOS 12. Only in multi-state/index.js::load(), in one spot. Worked around in-place. Commented with //~
  8. SVG href vs xlink:href - iOS 12.2. But there is a bigger problem: iOS11 doesn't seem to support use elements at all in the shadow DOM. A workaround would require a different template structure and code that uses visibility for multiple elements instead of href for a single element.
@sidewayss sidewayss added the 2029 Wait until 2029 to do it label Oct 26, 2024
@sidewayss sidewayss changed the title Old browser support issues, especially Safari Old browser support issues, especially iOS/Safari Oct 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2029 Wait until 2029 to do it
Projects
None yet
Development

No branches or pull requests

1 participant