Bugs I experienced and useful stuff I learnt while building the element

[motss]

Description

There are indeed a lot of fun things I myself experienced and some really driving me crazy because of the inconsistent implementation on different browsers including all old and modern browsers. If one implemented anything that does not follow the specs and happened to ship it to stable release in the browser, the bug is there forever as not all users will upgrade to the latest version for simple usage. This really makes literally all frontend devs pulling their hair out all the time trying to figure out what actually break their tests. I'm curating a list of bugs that happened to me so far and hopefully this list will help you brave little soul to get over all the frustrations, struggles, hurdles you could ever imagine.

Good news is that, you can make this world a better place to live in by contributing your problems with details, code samples, and/ or screenshots to help grow the list. Bring more joy to the world! ❤️ 🤘

IE11 (Windows 7)

• Intl.DateTimeFormat bug - adds LTR mark in formatted date.

  const formattedDate = Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  }).format(new Date('2020-01-05'))
  
  formattedDate.split('');
  // ["‎", "J", "a", "n", "‎", " ", "‎", "5", "‎", ",", " ", "‎", "2", "0", "2", "0"]
  // The 1st character in the array is the LTR mark.
  // This only appears in IE11, modern browsers do not include that in formatted date.
  
  // For consistency's sake, I guess it's totally safe to strip that LTR mark away.
  formattedDate.replace(/\u200e/gi, '').split('');
  // ["J", "a", "n", " ", "5", ",", " ", "2", "0", "2", "0"]
  // LTR mark is equivalent to `\u200e` in Unicode so we can take advantage of `RegExp` and
  // `String.prototype.replace` to remove it.

• Intl.DateTimeFormat bug - defaults all formatted day to be 2-digit.

  • Code sample

  Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  }).format(new Date('2020-01-05')); // 'Jan 05, 2020'

  • Screenshot
    

Safari 9 (OS X 10.11)

• (new Date('').toJSON() throws an Invalid Date error instead of returning null.

  /** Currently better way to validate date for all browsers */
  isNaN(+new Date('')); // If true, it is an invalid date.

• new Date(null) does not reset to date to UNIX timestamp's starting time.

Microsoft Edge 18

• Some attributes will get sorted in an unknown order.

  // `aria-label` comes before `attr` in `th`
  html`<th abbr="Tuesday" aria-label="Tuesday">T</th>`;
  // MS Edge renders: <th aria-label="Tuesday" abbr="Tuesday">T</th>
  
  // `aria-selected` comes before `aria-label` in `td`
  html`<td aria-label="Feb 20, 2020" aria-selected="false">20</td>`
  // MS Edge renders: <td aria-selected="false" aria-label="Feb 20, 2020">20</td>

Safari

• Jumpy <table>'s <caption. The <caption> always gets rendered 'out of box' of a table, in the case of the element, it always goes beyond the bottom of the table which is weird behavior. Some workarounds in the internet works for certain groups of people but not myself.

  <table>
    <caption>...</caption>
    ...
  </table>