Skip to content

Fix Firefox multi-line drag selection in task log view - #72034

Open
sln-jack wants to merge 1 commit into
apache:mainfrom
sln-jack:fix-firefox-logs-text-selection
Open

Fix Firefox multi-line drag selection in task log view#72034
sln-jack wants to merge 1 commit into
apache:mainfrom
sln-jack:fix-firefox-logs-text-selection

Conversation

@sln-jack

Copy link
Copy Markdown

Previously, dragging across multiple lines in the task log view caused the selection to jump back to the top of the logs, making it impossible to select multiple lines reliably. This was caused by the combination of position: absolute and transform: translateY() on virtualized rows.

This issue was originally reported in #55879 and fixed in #56238. It was then accidentally reverted in #60806, an unrelated performance optimization of scrollToIndex.

This PR swaps out translateY() for top based positioning in the virtualized log line list, once again fixing text drag selection behavior on Firefox.


Note I'm using the following Violentmonkey userscript to fix the selection behavior until my instance gets the fix:

// ==UserScript==
// @name Fix airflow 3.3.1 log text selection
// ==/UserScript==
new MutationObserver(() => {
  const rows = document.querySelectorAll('[data-testid="virtualized-list"] [data-index]');
  for (const row of rows) {
    // Clear previous override
    row.style.transform = "";

    // Read original translateY()
    const { transform } = getComputedStyle(row);
    const translateY = new DOMMatrixReadOnly(transform).m42;

    // Override transform and position via top instead
    row.style.transform = "none";
    row.style.top = `${translateY}px`;
  }
}).observe(document.body, {
  subtree: true,
  childList: true,
  attributes: true,
  attributeFilter: ["class"],
});

Was generative AI tooling used to co-author this PR?

No

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Aug 24, 2026
@boring-cyborg

boring-cyborg Bot commented Aug 24, 2026

Copy link
Copy Markdown

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide
Here are some useful points:

  • Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
  • In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example Dag that shows how users should use it.
  • Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
  • Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
  • Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
  • Be sure to read the Airflow Coding style.
  • Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
    Apache Airflow is a community-driven project and together we are making it better 🚀.
    In case of doubts contact the developers at:
    Mailing List: dev@airflow.apache.org
    Slack: https://s.apache.org/airflow-slack

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants