BrowserStack

BrowserStack is a cross-browser and cross-device testing platform that allows us to test websites on real browsers and real devices. It helps ensure that our FrontEnd work behaves consistently across different operating systems, browsers, and screen sizes.

At Terra, BrowserStack is mainly used during QA and final validation, especially when delivering FrontEnd modules or components.

---

Overview

Modern browsers and devices behave differently, even when using the same HTML, CSS, and JavaScript. BrowserStack allows us to catch issues that may not appear in local development or standard desktop testing.

We mainly use BrowserStack to:

• validate FrontEnd deliveries
• test real mobile devices (especially iOS)
• ensure compatibility across browsers
• support QA checklists required in ClickUp

---

QA checklist context

When you are asked to deliver a FrontEnd module or component, you’ll usually need to complete a QA checklist.

You can find it in ClickUp:

Action items → Create checklist → Use template → QA Checklist – FrontEnd

This checklist includes validation across:

• multiple browsers
• operating systems
• mobile and desktop devices

Responsive Viewer

In addition to BrowserStack, we also use Responsive Viewer, a browser extension that lets you quickly preview layouts across multiple screen sizes.

It’s useful for fast visual checks, but it does not test different browsers or real devices.

---

BrowserStack

BrowserStack access

BrowserStack is a shared account.

If you need to use it, ask first in the #browserstack Slack channel to check availability.
Logging in without coordination can close someone else’s session, so it’s important to keep usage organised.

BrowserStack allows testing on real browsers and real devices.

What we mainly test

Focus especially on:

• iOS (Safari on iPhone)
• Safari (macOS)
• Edge (Windows)
• Last versions of browsers

---

iOS 26 + Safari Debug Issue

An issue has been identified in Safari on iOS 26 affecting how the browser renders the toolbar background color.

This behavior is caused by the new Safari UI update (Liquid Glass) introduced in iOS 26, where browser automatically assigns a background color to the toolbar when it detects any DOM element that:

• Uses position: fixed
• Covers the entire viewport

When these conditions are met, Safari takes the background color of that element and applies it to the browser toolbar.

Solution

To ensure consistent toolbar rendering, preload and transition layers must explicitly define the color Safari should detect.

The following elements:

• .c--preload-a
• .c--transition-a

must meet all of the following requirements:

• Use position: fixed
• Cover 100% of the viewport
  • Using dvh units for height is recommended
• Define a background color
  • This color will be used by Safari as the toolbar background

Important considerations

Do not use display: none on these elements.

• Animations using transform and opacity are safe
• If the element is removed using display: none, Safari:
  • Detects the change during scroll
  • Immediately reverts the toolbar to a transparent background

This results in inconsistent toolbar behavior while scrolling.

---

---

Best practices

• BrowserStack doesn’t work with local environments
  • Always test against a deployed version of the site.
• If the project includes forms with autofill, make sure to test them in Edge.
• Always test iPhone + Safari, especially when:
  • JavaScript animations are involved
  • scroll-based interactions are used
  • complex layouts or transitions exist
• Use Responsive Viewer for quick layout checks.
• Prioritise iOS, Safari, and Edge.
• Test on a deployed environment, not locally.
• Follow the ClickUp QA Checklist – FrontEnd before marking tasks as done.
• Don’t assume “it works in Chrome” means “it works everywhere”.