Browser Compatibility Issues Demonstration

⚠️ Important Notice

This page contains intentional browser compatibility issues for testing and educational purposes only. These examples demonstrate code that may not work in certain browsers, missing polyfills, and browser-specific bugs. Always test across multiple browsers and use feature detection before using modern features.

Browser Compatibility Issues

The following examples demonstrate common browser compatibility problems:

1. Using Modern JavaScript Without Transpilation JavaScript

Modern JavaScript features that don't work in older browsers:

// VIOLATION: Modern JavaScript without transpilation
const arrowFunction = () => { ... }; // IE11 doesn't support
const spread = [...array1, ...array2]; // IE11 doesn't support
const { name, age } = user; // Destructuring - IE11 doesn't support
class MyClass { ... } // Classes - IE11 doesn't support
const promise = fetch('/api'); // Fetch API - IE11 doesn't support
const asyncFunc = async () => { ... }; // Async/await - IE11 doesn't support
      

2. CSS Grid Without Fallback CSS

CSS Grid not supported in older browsers:

/* VIOLATION: CSS Grid - no fallback */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* IE11 and older don't support CSS Grid */
      

Item 1

Item 2

Item 3

May not display correctly in IE11 or older browsers

3. CSS Flexbox Without Vendor Prefixes CSS

Flexbox may need vendor prefixes for older browsers:

/* VIOLATION: No vendor prefixes */
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* Older browsers may need -webkit-, -ms- prefixes */
      

4. CSS Variables (Custom Properties) CSS

CSS variables not supported in IE11:

/* VIOLATION: CSS Variables - IE11 doesn't support */
:root {
  --primary-color: #6366f1;
}
.element {
  color: var(--primary-color);
}
      

This text uses CSS variables (may not work in IE11)

5. Missing Polyfills for Modern APIs Polyfills

Using modern APIs without polyfills:

// VIOLATION: No polyfills
const data = await fetch('/api/data'); // fetch() - IE11 needs polyfill
const array = Array.from(nodeList); // Array.from() - IE11 needs polyfill
const includes = array.includes(item); // includes() - IE11 needs polyfill
const promise = Promise.all([...]); // Promise - IE11 needs polyfill
      

6. Browser-Specific CSS Properties CSS

Using properties that only work in specific browsers:

/* VIOLATION: Browser-specific without fallback */
.element {
  -webkit-backdrop-filter: blur(10px); /* Only WebKit browsers */
  backdrop-filter: blur(10px); /* Modern browsers */
  /* No fallback for other browsers */
}
      

7. Missing Feature Detection Detection

Using features without checking if they're supported:

// VIOLATION: No feature detection
function useFeature() {
  // Assumes feature exists
  if (window.IntersectionObserver) {
    // Uses IntersectionObserver
  } else {
    // No fallback, just fails silently
  }
}

// VIOLATION: Direct usage
document.querySelector('.element').classList.add('active');
// querySelector may not exist in very old browsers
      

8. ES6+ Array Methods JavaScript

Modern array methods not supported in older browsers:

// VIOLATION: ES6+ array methods
const doubled = array.map(x => x * 2); // IE11 supports
const filtered = array.filter(x => x > 5); // IE11 supports
const found = array.find(x => x.id === 5); // IE11 doesn't support
const includes = array.includes(5); // IE11 doesn't support
const flat = array.flat(); // IE11 doesn't support
const flatMap = array.flatMap(x => [x, x * 2]); // IE11 doesn't support
      

9. Template Literals JavaScript

Template literals not supported in IE11:

// VIOLATION: Template literals - IE11 doesn't support
const name = 'John';
const message = `Hello, ${name}!`; // IE11 doesn't support
const multiLine = `Line 1
Line 2`; // IE11 doesn't support
      

10. CSS Container Queries CSS

Container queries not supported in many browsers:

/* VIOLATION: Container queries - limited support */
.container {
  container-type: inline-size;
}
@container (min-width: 500px) {
  .item {
    background: blue;
  }
}
/* Only supported in very recent browsers */
      

11. CSS :has() Selector CSS

:has() selector has limited browser support:

/* VIOLATION: :has() selector - limited support */
.parent:has(.child) {
  background: blue;
}
/* Not supported in Firefox until recently, not in older browsers */
      

12. Web APIs Without Checks APIs

Using Web APIs that may not be available:

// VIOLATION: No availability checks
localStorage.setItem('key', 'value'); // May not exist in private browsing
sessionStorage.getItem('key'); // May not exist
navigator.geolocation.getCurrentPosition(...); // May not be available
window.Notification.requestPermission(); // May not be supported
      

13. CSS Logical Properties CSS

Logical properties have limited support:

/* VIOLATION: Logical properties - limited support */
.element {
  margin-inline-start: 20px; /* Instead of margin-left */
  padding-block-end: 10px; /* Instead of padding-bottom */
  border-inline: 1px solid; /* Instead of border-left/right */
}
/* Not supported in older browsers */
      

14. JavaScript Optional Chaining JavaScript

Optional chaining not supported in older browsers:

// VIOLATION: Optional chaining - IE11 doesn't support
const name = user?.profile?.name; // IE11 doesn't support
const value = data?.items?.[0]?.value; // IE11 doesn't support
const result = func?.(); // IE11 doesn't support
      

15. CSS Aspect Ratio CSS

Aspect ratio property has limited support:

/* VIOLATION: aspect-ratio - limited support */
.image {
  aspect-ratio: 16 / 9;
  width: 100%;
}
/* Not supported in older browsers */
      

Browser Compatibility Solutions

The following examples demonstrate proper cross-browser compatibility practices:

1. Transpiled JavaScript Transpiled

// Compliant: Use Babel to transpile modern JS
// Source (modern):
const arrowFunction = () => { ... };

// Transpiled (compatible):
var arrowFunction = function() { ... };

// Or use feature detection
if (typeof fetch !== 'undefined') {
  fetch('/api');
} else {
  // Fallback for older browsers
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api');
  xhr.send();
}
      

2. CSS Grid with Fallback Fallback

/* Compliant: CSS Grid with fallback */
.container {
  display: block; /* Fallback for older browsers */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
      

3. Flexbox with Vendor Prefixes Prefixes

/* Compliant: Flexbox with vendor prefixes */
.container {
  display: -webkit-box; /* Old webkit */
  display: -ms-flexbox; /* IE10 */
  display: flex; /* Standard */
  
  -webkit-justify-content: flex-start;
  -ms-flex-pack: justify;
  justify-content: flex-start;
}
      

4. CSS Variables with Fallback Fallback

/* Compliant: CSS Variables with fallback */
.element {
  color: #6366f1; /* Fallback for IE11 */
  color: var(--primary-color, #6366f1); /* With default value */
}

@supports (--css: variables) {
  :root {
    --primary-color: #6366f1;
  }
  .element {
    color: var(--primary-color);
  }
}
      

5. Polyfills for Modern APIs Polyfills

<!-- Compliant: Include polyfills -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,Promise,Array.from"></script>
<script src="main.js"></script>

<!-- Or use feature detection -->
<script>
  if (!window.fetch) {
    // Load fetch polyfill
    document.write('<script src="fetch-polyfill.js"><\/script>');
  }
</script>
      

6. Browser-Specific with Fallbacks Fallbacks

/* Compliant: Browser-specific with fallback */
.element {
  background: rgba(0, 0, 0, 0.5); /* Fallback */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@supports (backdrop-filter: blur(10px)) {
  .element {
    backdrop-filter: blur(10px);
  }
}
      

7. Feature Detection Detection

// Compliant: Feature detection
function useFeature() {
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver(callback);
    observer.observe(element);
  } else {
    // Fallback for browsers without IntersectionObserver
    // Use scroll event or other method
    window.addEventListener('scroll', fallbackHandler);
  }
}

// Compliant: Check before using
if (document.querySelector) {
  const element = document.querySelector('.element');
  if (element) {
    element.classList.add('active');
  }
} else {
  // Fallback for very old browsers
  const element = document.getElementsByClassName('element')[0];
  if (element) {
    element.className += ' active';
  }
}
      

8. Polyfills for Array Methods Polyfills

// Compliant: Use polyfills or feature detection
if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    for (var i = 0; i < this.length; i++) {
      if (predicate(this[i], i, this)) {
        return this[i];
      }
    }
    return undefined;
  };
}

// Or use alternative approach
const found = array.filter(x => x.id === 5)[0]; // Works in IE11
      

9. String Concatenation for IE11 Compatible

// Compliant: Compatible string concatenation
const name = 'John';
const message = 'Hello, ' + name + '!'; // Works in all browsers

// Or transpile template literals
const multiLine = 'Line 1\n' +
                  'Line 2'; // Works in all browsers
      

10. Container Queries with Fallback Fallback

/* Compliant: Container queries with fallback */
.item {
  background: red; /* Fallback */
}

@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
  @container (min-width: 500px) {
    .item {
      background: blue;
    }
  }
}
      

11. :has() Selector with Fallback Fallback

/* Compliant: :has() with fallback */
.parent {
  background: default; /* Fallback */
}

@supports selector(:has(*)) {
  .parent:has(.child) {
    background: blue;
  }
}
      

12. Web APIs with Availability Checks Checks

// Compliant: Check availability
function saveToStorage(key, value) {
  try {
    if (typeof(Storage) !== 'undefined' && localStorage) {
      localStorage.setItem(key, value);
    } else {
      // Fallback: use cookies or server storage
      document.cookie = key + '=' + value;
    }
  } catch (e) {
    // Handle private browsing mode
    console.error('Storage not available:', e);
  }
}

// Compliant: Check geolocation
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  // Fallback: ask user for location manually
  showLocationInput();
}
      

13. Logical Properties with Fallback Fallback

/* Compliant: Logical properties with fallback */
.element {
  margin-left: 20px; /* Fallback */
  padding-bottom: 10px; /* Fallback */
  border-left: 1px solid; /* Fallback */
}

@supports (margin-inline-start: 0) {
  .element {
    margin-inline-start: 20px;
    padding-block-end: 10px;
    border-inline: 1px solid;
  }
}
      

14. Optional Chaining with Fallback Fallback

// Compliant: Optional chaining with fallback
const name = user && user.profile && user.profile.name;
// Or transpile optional chaining:
// const name = user?.profile?.name; // Transpiled to above

// Compliant: Safe property access
const value = (data && data.items && data.items[0] && data.items[0].value) || defaultValue;
      

15. Aspect Ratio with Fallback Fallback

/* Compliant: aspect-ratio with fallback */
.image {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio fallback */
  background-size: cover;
}

@supports (aspect-ratio: 16 / 9) {
  .image {
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
}
      

16. Using Autoprefixer Tooling

/* Compliant: Use Autoprefixer tool */
/* Write modern CSS: */
.element {
  display: grid;
  user-select: none;
}

/* Autoprefixer automatically adds: */
.element {
  display: -ms-grid; /* IE10 */
  display: grid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
      

17. Browser Testing Checklist Testing

Test in:

Chrome (latest and previous version)
Firefox (latest and previous version)
Safari (latest and previous version)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Mobile)
Consider: IE11 if needed for your audience

Use tools:

BrowserStack or Sauce Labs for cross-browser testing
Can I Use (caniuse.com) for feature support
Babel for JavaScript transpilation
Autoprefixer for CSS prefixes
Polyfill.io for API polyfills

About This Page

This page is designed for:

Testing browser compatibility analysis tools
Training developers on cross-browser compatibility
Understanding browser support differences
Learning about polyfills and feature detection

Remember: Always test your code in multiple browsers, use feature detection, provide fallbacks, and consider your target audience's browser usage. Use tools like Babel, Autoprefixer, and polyfills to ensure compatibility.