Skip to content

Browser-Compatibility.md

Latest commit

 

History

History
104 lines (68 loc) · 3.4 KB

Browser-Compatibility.md

File metadata and controls

104 lines (68 loc) · 3.4 KB
Raw

Browser Compatibility

MagicFrame uses standard HTML, CSS, and JavaScript features that are well-supported across modern browsers. This page provides information about browser compatibility and potential issues.

Supported Browsers

MagicFrame should work in all modern browsers that support iframes and basic JavaScript:

Browser Minimum Version Notes
Chrome 4+ Full support
Firefox 3.5+ Full support
Safari 4+ Full support
Edge All versions Full support
Internet Explorer 8+ Limited support in IE8-9 (see notes below)
Opera 10.5+ Full support
Mobile Safari iOS 3+ Full support
Android Browser Android 2.2+ Full support

Feature Compatibility

iframes

The <iframe> element is supported in all modern browsers. The fallback content (<p>Your browser does not support iframes.</p>) will only be displayed in very old browsers that don't support iframes.

JavaScript Features

MagicFrame uses the following JavaScript features:

  1. DOM Manipulation: document.getElementById() - Supported in all modern browsers
  2. Event Handling: onload event - Supported in all modern browsers
  3. Window Location: window.location.search and window.location.hash - Supported in all modern browsers

CSS Features

The CSS used in MagicFrame is basic and well-supported:

html, body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  height: 100%;
}

These properties are supported in all modern browsers.

Known Issues

Internet Explorer 8-9

In Internet Explorer 8 and 9, there may be issues with:

  • Title synchronization: The contentWindow.document.title property might not be accessible for cross-origin iframes
  • Hash fragment handling: There might be inconsistencies in how hash fragments are processed

Mobile Browsers

On some mobile browsers, there might be issues with:

  • Viewport sizing: The iframe might not correctly fill the entire viewport on some mobile devices
  • Scrolling behavior: The scrolling='auto' attribute might behave differently across mobile browsers

Cross-Origin Limitations

As detailed in the Security Considerations page, cross-origin restrictions may prevent title synchronization and other interactions between MagicFrame and the iframe content.

Testing Recommendations

When implementing MagicFrame, we recommend testing in:

  1. Multiple desktop browsers: Chrome, Firefox, Safari, Edge
  2. Mobile browsers: iOS Safari, Android Chrome
  3. Different viewport sizes: Desktop, tablet, and mobile sizes

Workarounds for Specific Issues

Viewport Sizing on Mobile

If you encounter issues with the iframe not filling the entire viewport on mobile devices, you can add the following meta tag to the <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Scrolling Behavior

If you encounter issues with scrolling behavior, you can try different values for the scrolling attribute:

<iframe scrolling="yes">...</iframe>  <!-- Always show scrollbars -->
<iframe scrolling="no">...</iframe>   <!-- Never show scrollbars -->
<iframe scrolling="auto">...</iframe> <!-- Show scrollbars when needed (default) -->

Or use CSS to control overflow behavior:

iframe {
  overflow: auto; /* or 'scroll', 'hidden', etc. */
}