Cross-browser testing of a 1C-Bitrix website

Cross-Browser Testing of a 1C-Bitrix Website

Safari on iOS 16 renders the checkout form with broken inputs. Firefox on Windows ignores gap in flex containers in older versions. Edge on corporate machines blocks an analytics script due to a security policy. These are not hypothetical scenarios — they are real issues that regularly come in as support tickets after launch. Cross-browser testing on Bitrix projects has its own specifics: beyond layout, you need to check the behavior of JS components (smart filter, delivery widgets, payment forms) and the correctness of custom templates.

Browser Matrix

The matrix is built based on real project analytics or industry data. For e-commerce in 2024–2025, the baseline matrix looks like this:

P0 — blocks release, P1 — must work, P2 — desirable.

Bitrix Component Specifics

Smart filter — historically a problematic component in Firefox and Safari. The main cause: use of non-standard CSS properties in the template and direct DOM manipulation via BX.bind. Check:

• Expanding/collapsing filter groups
• Correct URL update when selecting parameters (History API)
• Price range slider behavior in all browsers
• Correct filter reset

Checkout form — numerous custom JS events in /bitrix/templates/.default/components/bitrix/sale.order.ajax/. Safari has historically had issues with:

• position: sticky inside overflow: hidden containers
• Form autofill with non-standard name attributes
• date input — not supported before Safari 14

Pickup point widgets (CDEK, Boxberry) — third-party JS widgets that may conflict with CSP headers. In Safari, there is an additional issue — ITP (Intelligent Tracking Prevention) may block cookies from subdomains used by the widgets.

Payment forms — pay special attention to payment system iframes in Safari. Apple tightened third-party cookie policy in iframes with iOS 17, which can break embedded (non-redirect) payment forms.

Technical Aspects

Common CSS issues in custom Bitrix templates:

/* Problem: gap in flex did not work in Safari < 14.1 */
.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* → fallback via margin */
}

/* Solution */
.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
.catalog-grid > .item {
    margin: 10px;
}

/* Or use @supports */
@supports (gap: 20px) {
    .catalog-grid { gap: 20px; margin: 0; }
    .catalog-grid > .item { margin: 0; }
}

JS specifics of Bitrix in cross-browser testing — the use of the legacy BX API (global Bitrix object). It is compatible with all target browsers, but custom code on top of it often uses ES6+/ES2020 without transpilation via Babel. Check:

// Problem: optional chaining does not work in older browsers without transpile
const price = product?.offers?.[0]?.price; // Breaks in Samsung Internet 14

// Safe alternative
const price = product && product.offers && product.offers[0] && product.offers[0].price;

Tooling

BrowserStack — most complete coverage of real devices and browsers. Integrates with Playwright:

// playwright.config.js for BrowserStack
const capabilities = {
    'browserstack.user': process.env.BROWSERSTACK_USERNAME,
    'browserstack.key': process.env.BROWSERSTACK_ACCESS_KEY,
    'project': 'Bitrix Shop',
    'build': `Regression ${new Date().toISOString()}`,
};

Playwright locally covers Chromium, Firefox, and WebKit (Safari engine) out of the box — this is the foundation. BrowserStack is needed for real iOS devices and specific versions of Samsung Internet.

LambdaTest — a BrowserStack alternative, cheaper for smaller projects.

Manual testing on real devices remains indispensable for Safari on iPhone — WebKit in Playwright and real Safari on a device behave differently when handling touch events and the virtual keyboard.

Timelines