Skip to content

Bard toolbar behind set in Firefox #14060

@AtmoFX

Description

@AtmoFX

Bug description

In a code block inside a set of a bard field, Firefox shows me a sticky toolbar behind the code block; as that code block has no background, it looks like the toolbar is transparent (but with a big zoom into the page, I can tell the toolbar's text is actually behind the code block's).

Image

The issue may be linked to https://github.com/statamic/cms/pull/13429/changes and while the change introduced in that PR works in most case, it seems it won't for code blocks inside a set (possibly block types too).

Explanation: the CodeMirror-gutter-wrapper, CodeMirror-gutter-elt and possibly more classes have a z-index of 4, and they seem to somehow end up on top of the toolbar in the stacking context.
That places the div with class="bard-fixed-toolbar" behind them (due to --z-index-portal being set to 2).

As a quick test, if you force e.g. --z-index-portal: 5, the issue disappears (not that I am saying this is how the issue should be fixed nor that 5 is the correct value to set).


On an unrelated note, the gutter and the code overlap when code blocks are added into a Bard field, but it works well when added to the blueprint root directly.

Image

How to reproduce

In Firefox:

  1. Save the below blueprint
  2. Create an entry.
  3. Inside the bard field, add a Code set and edit something in it (Make it long enough that you can scroll down a little bit)
  4. Click outside the set into the bard field
  5. Scroll down

Logs

Environment

Environment
Application Name: All you need
Laravel Version: 12.49.0
PHP Version: 8.3.6
Composer Version: 2.9.2
Environment: local
Debug Mode: ENABLED
URL: allyouneed.local
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Livewire
Livewire: v4.1.0

Statamic
Addons: 2
Sites: 1
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.3.3 PRO

Statamic Addons
allyouneed/seo: dev-main
allyouneed/statamic-forms: dev-main

Installation

Fresh statamic/statamic site via CLI

Additional details

Note that the issue seems absent from Chrome and I do not understand why (or rather, why it exists in Firefox as I would expected the stacking context to sort things out nicely).

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions