Frontend Development for IE11

Web-IE11-fixes.txt

1. Problems with inactive margin of elements inside flexbox.
Solution: Add pseudo-element ::after like
  .element::after {
    content: '';
    display: block;
    height: 20px;
  }

2. Undesired phone number detection on a page with odd styling.
Solution: Add meta into head - <meta name="format-detection" content="telephone=no">.

3. Pseudo-elemenets specific for IE - https://developer.mozilla.org/en-US/docs/tag/Pseudo-element (starting with -ms-).
Solution: In most cases just add display: none;

4. new Date('2019-01-01 12:02:02') throws Invalid Date.
Solution:
  let date = '2019-01-01 12:02:02';
  date = date.replace(/-/g, '/');

5. Parent element has two elements with float. Another element next to parent rises unexpectedly.
Solution:
  .parent {
    overflow: hidden;
  }

6. SVG image <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">...</svg> loads as href in element <img href="/img/icon.svg" width="136" height="136" /> but sizes are ignored.
Solution: Remove width and height from the SVG image itself - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">...</svg>

7. Any <input /> having placeholder triggers onchange event on page load.

8. SVGs are focusable by default.
Solution: Add attribute focusable="false" to SVG => <svg focusable="false></svg>