I was thinking the same thing.

If I scaffold a new React App using Create React App it comes with browserslist[1] which handles setting the target browsers versions that babel will transpile to. If you never change the defaults then the production targets are: ">0.2%", "not dead", and "not op_mini all".

I was wondering if these defaults would have prevented this problem in the story from happening.

If we run this:

  npx browserslist ">0.2%, not dead, not op_mini all"

We get this list:

  and_chr 96
  and_ff 95
  and_uc 12.12
  android 4.4.3-4.4.4
  chrome 96
  chrome 95
  chrome 94
  chrome 93
  chrome 92
  edge 96
  firefox 95
  firefox 94
  ie 11
  ios_saf 15.2
  ios_saf 15.0-15.1
  ios_saf 14.5-14.8
  ios_saf 14.0-14.4
  ios_saf 13.4-13.7
  ios_saf 12.2-12.5
  opera 82
  opera 81
  safari 15.1
  safari 15
  safari 14.1
  safari 14
  safari 13.1
  samsung 15.0

From that list it looks like the oldest Chrome supported is 92 and oldest supported Safari is 12.2-12.5

In the post, the versions the mom was stuck with were:

  - Chrome 76 (released July 30, 2019[2])
  - iOS Safari 12.?? (originally released 2018, last update 2019[3])

So using Create React app this probably should have at least worked in iOS Safari.

So this brings up the question of how far back should we support? Chrome 76 and iOS 12 are only a few years old (2018-2019). According to caniuse[4], Both Chrome 76 and Safari 12.1 have a usage of 0.07% so in order to support it you would need to change the ">0.2%" to ">0.06%". If your build process is already setup to use Babel+BrowsersList then it should be an easy fix of just changing values in the array and it should come at no cost to your development experience.

1. https://github.com/browserslist/browserslist

2. https://en.wikipedia.org/wiki/Google_Chrome_version_history

3. https://en.wikipedia.org/wiki/Safari_version_history

4 https://caniuse.com/usage-table