Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
OctavianC opened this issue Aug 8, 2024 · 2 comments
Open

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

OctavianC opened this issue Aug 8, 2024 · 2 comments
Labels
No Code Attached Yet

Comments

@OctavianC
Copy link
Contributor

OctavianC commented Aug 8, 2024 •
edited
Loading

Steps to reproduce the issue

  • Go to System - Global Configuration - System and set Debug System to Yes
    image

  • Edit your user account - Accessibility Settings and enable either 'High Contrast' or 'Monochrome' (doesn't matter)
    image

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
Copy link
Contributor

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
Copy link
Contributor Author

OctavianC commented Aug 26, 2024 •
edited
Loading

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
No Code Attached Yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@angieradtke @OctavianC @joomla-cms-bot