As a stopgap until we're able to polyfill unsupported modules, let's add some conditional code to handle parts of our UI differently in IE and other browsers that don't support them.
This includes:
- In init.js we're using HTMLImageElement.decode() to improve the transition between the PHP UI and the JS UI. If that method isn't supported, we'll forego using it knowing that it might negatively impact UX during the transition.
- We're using the IntersectionObserver to lazy-load images when they enter the viewport. If that module isn't supported, we'll just load all images immediately.
- We're using the IntersectionObserver to automatically load more results on scroll. If it's not supported, just show the "load more" button after each batch.
- We're using the IntersectionObserver to help us add and remove a gradient on horizontally-scrolled elements (tabs and search filters) on small screens to indicate to the user that they can scroll to see more. If IntersectionObserver isn't supported, don't show the gradient at all.
Acceptance Criteria:
- JavaScript UI works in Internet Explorer 11
- JS UI is unchanged in modern browsers