Auto cursor not applied in Gecko

Question

This seems like a rendering engine quirk, as it had been tested and failed to reproduce on WebKit driven browsers (Chrome and Safari for Windows).

Description

When using a deep nested DOM structure, such as the GXT Grid, the default cursor seem to override any other style applied. How to override (or sidestep) this behavior?

Test Case

Steps To Reproduce

(Requires basic knowledge of your favored browser's developer tools)

1. Visit the GXT 2.2.x examples showcase.
2. Right-click a cell text value in the grid and click Inspect Element, or hit F12 to open the developer tools and than inspect that element manually. You should be inspecting an element notated as: div.x-grid3-cell-inner.x-grid3-col-name.
3. In the Styles view, look for a rule matching the following selector: .x-grid3-row, it should have a single declared property for cursor. Change its value from default to auto.

Expected Result

The cursor should be rendered according to the element's type, e.g. text cursor for text content elements.

Actual Result

On Gecko based browsers, the default cursor appears regardless of the element's type.

Answer 1

This is a known issue caused by ancestor elements with a declared tabindex attribute with a value equals or larger than 0, and is a reported bug in the Mozilla bug tracker.

It can be reproduced by running this simple test case on Gecko browsers (run on WebKit for a reference).

As a workaround, one can ensure all elements up the hierarchy are assigned with a tabindex value of -1, or remove those altogether, thus avoiding entering this block, turning cursor related CSS rules back to their normal behavior.