Cross-Browser Testing and Shopify Quirks

## Recommended Test Environments

Desktop:

- Chrome (Windows/Mac)
- Safari (Mac)
- Firefox (Windows/Mac)
- Edge (Windows)

Mobile:

- Safari (iOS, multiple iPhone sizes)
- Chrome (Android)
- Samsung Internet (Android)

Tablets:

- Safari (iPad)
- Chrome (Android tablet)

## Visual Tests

- [ ] Layout renders correctly
- [ ] Images display at correct sizes
- [ ] Fonts load and display
- [ ] Colors match design
- [ ] Hover states work
- [ ] Focus states visible
- [ ] Animations play smoothly
- [ ] No horizontal overflow
- [ ] Sticky elements work

## Functional Tests

- [ ] Navigation menus work
- [ ] Mobile menu opens/closes
- [ ] Dropdowns function
- [ ] Forms submit correctly
- [ ] Cart updates
- [ ] Variant selection works
- [ ] Search functions
- [ ] Filtering/sorting works
- [ ] Modal/drawer interactions
- [ ] Sliders/carousels work

/* Flexbox gap not supported in older Safari */
/* Use margin fallback */
.flex-container {
  display: flex;
  gap: 1rem; /* Modern browsers */
}

@supports not (gap: 1rem) {
  .flex-container > * + * {
    margin-left: 1rem;
  }
}

/* Sticky positioning in Safari */
.sticky-header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

/* 100vh issue on iOS Safari */
.full-height {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height */
}

/* Reset Safari form styles */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Fix select dropdown arrow */
select {
  background-image: url('data:image/svg+xml,...');
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

/* Prevent zoom on input focus */
@media screen and (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px; /* Prevents zoom */
  }
}

/* Safe area insets for notch */
.footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Momentum scrolling */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Scrollbar styling (Firefox) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-background);
}

/* Number input spinner */
input[type='number'] {
  -moz-appearance: textfield;
}

{# Detect and warn legacy browsers #}
<!--[if IE]>
<div class="browser-warning">
  Your browser is not supported. Please upgrade.
</div>
<![endif]-->

/* Account for Shopify preview bar */
.sticky-header {
  top: 0;
}

/* When preview bar is present */
html.shopify-preview {
  --header-offset: 44px;
}

.shopify-preview .sticky-header {
  top: var(--header-offset);
}

{# Detect theme editor #}
{%- if request.design_mode -%}
  {# Theme editor specific code #}
  <style>
    /* Styles only in editor */
  </style>
{%- endif -%}

// Handle section re-renders in theme editor
document.addEventListener('shopify:section:load', (event) => {
  // Reinitialize components in the section
  initializeSlider(event.target);
});

document.addEventListener('shopify:section:unload', (event) => {
  // Cleanup before section is removed
  destroySlider(event.target);
});

document.addEventListener('shopify:block:select', (event) => {
  // Block was selected in editor
  scrollToBlock(event.target);
});

// Cart may have different tokens between contexts
// Always use relative URLs for cart operations
fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    id: variantId,
    quantity: 1,
  }),
});

{# Use money filters consistently #}
{{ product.price | money }}                    {# $10.00 #}
{{ product.price | money_without_currency }}   {# 10.00 #}
{{ product.price | money_with_currency }}      {# $10.00 USD #}

{# For JavaScript #}
<script>
  const price = {{ product.price | json }};  {# Cents: 1000 #}
  const formatted = Shopify.formatMoney(price);
</script>

// Predictive search has rate limits
// Debounce search requests
let searchTimeout;
searchInput.addEventListener('input', () => {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    performSearch(searchInput.value);
  }, 300);
});

## DevTools Features to Use

- Device emulation (mobile sizes)
- Network throttling (slow 3G)
- Disable cache
- Console for JavaScript errors
- Network tab for failed requests
- Application tab for storage issues

/* Common breakpoints */
@media (max-width: 479px) {
  /* Small mobile */
}
@media (min-width: 480px) {
  /* Large mobile */
}
@media (min-width: 768px) {
  /* Tablet */
}
@media (min-width: 1024px) {
  /* Desktop */
}
@media (min-width: 1200px) {
  /* Large desktop */
}

## Viewport Testing

- [ ] 320px (iPhone SE)
- [ ] 375px (iPhone 12/13/14)
- [ ] 414px (iPhone Plus)
- [ ] 768px (iPad portrait)
- [ ] 1024px (iPad landscape)
- [ ] 1280px (Laptop)
- [ ] 1440px (Desktop)
- [ ] 1920px (Large display)

// Check for feature support
if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Fallback for older browsers
}

// CSS feature detection
if (CSS.supports('gap', '1rem')) {
  // Gap is supported
}

{# Load polyfills conditionally #}
<script>
  if (!('IntersectionObserver' in window)) {
    document.write('<script src="{{ 'intersection-observer-polyfill.js' | asset_url }}"><\/script>');
  }
</script>

// Identify issues quickly
console.log('Cart:', cart);
console.error('Failed to add to cart:', error);

// Group related logs
console.group('Product Form');
console.log('Variant:', selectedVariant);
console.log('Quantity:', quantity);
console.groupEnd();

{# Debug Liquid variables #}
<pre style="background: #f0f0f0; padding: 1rem;">
  {{ product | json }}
</pre>

{# Conditional debug output #}
{%- if request.design_mode -%}
  <!-- Debug: template = {{ template }} -->
{%- endif -%}

## Pre-Launch Testing Workflow

1. **Development Testing**
   - Test in primary browser during development
   - Check responsive at key breakpoints
   - Verify JavaScript functionality

2. **Cross-Browser Testing**
   - Test in all priority browsers
   - Check mobile browsers on real devices
   - Test tablet layouts

3. **Shopify-Specific Testing**
   - Test in theme editor
   - Test section re-rendering
   - Test with apps installed
   - Test checkout flow

4. **Edge Cases**
   - Long content/titles
   - Missing images
   - Empty collections
   - Sold out products
   - Multiple currencies