bug: fixed positioning cannot be used in vitest browser headless mode

[rxliuli]

Describe the bug

Kapture.2025-04-02.at.21.36.47.mp4

Command

pnpm vitest toast.browser.test.ts --project=browser --run # success
pnpm vitest toast.browser.test.ts --project=headless --run # failed

toast.browser.test.ts

import { it } from 'vitest'
import { page } from '@vitest/browser/context'

it('should render', async () => {
  const div = document.createElement('button')
  div.innerHTML = 'Hello'
  div.style.position = 'fixed'
  div.style.bottom = '40px'
  div.style.backgroundColor = 'red'
  document.body.appendChild(div)
  await page.getByText('Hello').click()
}, 5000)

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  // If you want to keep running your existing tests in Node.js, uncomment the next line.
  // 'vite.config.ts',
  {
    extends: 'vite.config.ts',
    test: {
      name: 'browser',
      browser: {
        enabled: true,
        provider: 'playwright',
        // https://vitest.dev/guide/browser/playwright
        instances: [{ browser: 'chromium' }],
      },
    },
  },
  {
    extends: 'vite.config.ts',
    test: {
      name: 'headless',
      browser: {
        enabled: true,
        headless: true,
        provider: 'playwright',
        // https://vitest.dev/guide/browser/playwright
        instances: [{ browser: 'chromium' }],
      },
    },
  },
])

Reproduction

Yes, I found this issue when using svelte-sonner, which caused the toast popup to be unclickable because the toast was not within the visible window.

wobsoriano/svelte-sonner#140
https://github.com/rxliuli/svelte-sonner-error-demo

System Info

System:
    OS: macOS 15.3.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 1.60 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 10.5.2 - /usr/local/bin/pnpm
    bun: 1.1.6 - ~/.bun/bin/bun
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 131.1.73.105
    Chrome: 134.0.6998.166
    Edge: 128.0.2739.54
    Safari: 18.3.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Can you explain what's not expected with toast.browser.test.ts? It would be great if you can provide a standalone repro which passes with headed and fails with headless.

[github-actions]

Hello @rxliuli. Please provide a minimal reproduction using a GitHub repository or StackBlitz (you can also use examples). Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[rxliuli]

@hi-ogawa Sorry, I didn't have time a few days ago. I just updated the issue, added expect tests and provided commands for success and failure, and also added a demo video. Can you reopen this issue?

[hi-ogawa]

Thanks for the repro. ui: false, headless: false is failing too, so the issue might be viewport sizing similar to #6512.

I moved a repro to https://stackblitz.com/edit/vitest-dev-vitest-qxo675q2?file=src%2Frepro.test.ts so it's easier to download and tests

[hi-ogawa]

I confirmed this is fixed by #6512

[rxliuli]

I confirmed this is fixed by #6512

I will follow up on this issue again when a new version is released.