[#43894] - [5.x] Enabling High Contrast or Monochrome in Accessibility Settings breaks position: fixed elements
- New
- Medium
- Build: 4.4-dev
- # 43894
Steps to reproduce the issue
-
Go to System - Global Configuration - System and set Debug System to Yes
-
Edit your user account - Accessibility Settings and enable either 'High Contrast' or 'Monochrome' (doesn't matter)
Expected result
Debug icon (and window) remains in a fixed position at the bottom of the viewport
Actual result
Debug icon (and window) moved at the end of the document, regardless of where the viewport is
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)
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
Using the class on the <html> instead of the <body> tag solves this.
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.