search

joomla / joomla-cms

Home of the Joomla! Content Management System
https://www.joomla.org
GNU General Public License v2.0
4.77k stars 3.65k forks source link

[5.x] Enabling High Contrast or Monochrome in Accessibility Settings breaks position: fixed elements #43894

Open OctavianC opened 2 months ago

OctavianC commented 2 months ago

Steps to reproduce the issue

Expected result

Debug icon (and window) remains in a fixed position at the bottom of the viewport image

Actual result

Debug icon (and window) moved at the end of the document, regardless of where the viewport is image

Additional comments

Digging around this seems to be an issue with CSS filter on the parent and position: fixed on child elements. From here:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

This means that your position:fixed element will be positioned relatively to the filtered container and no more the viewport. In other words, it's still fixed but inside its new containing block (the filtered container)

angieradtke commented 2 months ago

Using the filter property creates a new containing block for absolute and fixed-positioned descendants, unless the element it is applied to is the document root element of the current browsing context.

This means that a position: fixed element will be positioned relative to the filtered container, rather than the viewport. In other words, it remains fixed, but within its new containing block (the filtered container).

This can actually be a useful technique, as it allows you to achieve a behavior that would otherwise be difficult to implement.

The effects of this behavior are not particularly problematic. Changing it would likely require extensive testing, which I believe would be disproportionate to the impact.

OctavianC commented 2 months ago

Using the class on the <html> instead of the <body> tag solves this.