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

LibWeb: A position: fixed or position: absolute header on a page prevents contenteditable from working #22050

Open
trflynn89 opened this issue Nov 25, 2023 · 1 comment
Open

LibWeb: A position: fixed or position: absolute header on a page prevents contenteditable from working #22050

trflynn89 opened this issue Nov 25, 2023 · 1 comment
Labels
bug Something isn't working web compatibility

Comments

@trflynn89
Copy link
Member

Minimal repro:

<html>
    <head>
        <style type="text/css">
            .header {
                position: fixed;
                top: 0;
            }
            .content {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="header">Header</div>
        <div class="content" contenteditable>Content</div>
    </body>
</html>

In the above example, the contenteditable div is not actually editable. If the position: fixed style is removed from the header div, then it is editable. The same issue occurs with position: absolute.
@trflynn89 trflynn89 added bug Something isn't working web compatibility labels Nov 25, 2023
@trflynn89
Copy link
Member Author

trflynn89 commented Nov 25, 2023 •
edited
Loading

Looks like it's hit testing that's not quite right. If you add contenteditable to the header element, then clicking the content element starts editing the header element.

<html>
    <head>
        <style type="text/css">
            .header {
                position: absolute;
                top: 0;
            }
            .content {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="header" contenteditable>Header</div>
        <div class="content" contenteditable="true">Content</div>
    </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working web compatibility
Projects
No open projects
Ladybird
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@trflynn89