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

Support position: static (absolute position relative a non-parent ancestor) #212

Open
Tracked by #345
CatThingy opened this issue Aug 2, 2022 · 3 comments
Open
Tracked by #345

Support position: static (absolute position relative a non-parent ancestor) #212

CatThingy opened this issue Aug 2, 2022 · 3 comments
Labels
enhancement New feature or request

Comments

@CatThingy
Copy link

taffy version

0.1.0

Platform

Rust, with Bevy

What you did

I inserted a node with PositionType::Absolute as a child of a node with PositionType::Relative and set its position to be 50px from the top:

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(init)
        .run();
}

fn init(mut cmd: Commands) {
    cmd.spawn_bundle(Camera2dBundle::default());

    cmd.spawn_bundle(NodeBundle {
        style: Style {
            size: Size {
                height: Val::Px(50.0),
                width: Val::Auto,
            },
            flex_grow: 1.0,
            align_self: AlignSelf::Center,
            position_type: PositionType::Relative,
            ..default()
        },
        color: Color::MIDNIGHT_BLUE.into(),
        ..default()
    })
    .with_children(|root| {
        root.spawn_bundle(NodeBundle {
            style: Style {
                size: Size {
                    height: Val::Px(50.0),
                    width: Val::Px(50.0),
                },
                position_type: PositionType::Absolute,
                position: UiRect {
                    top: Val::Px(50.0),
                    ..default()
                },
                ..default()
            },
            color: Color::YELLOW.into(),
            ..default()
        });
    });
}

What went wrong

I expected the child node to be placed 50px from the top of the window; however, it was placed 50px from the top of its parent.

Additional information

Screenshot:
image

Recreation in HTML/CSS, with expected behaviour:

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height: 100%;
                margin: 0;
            }
            .root {
                display: flex;
                height: 100%;
                background-color: grey;
            }
            .parent {
                display: flex;
                align-self: center;
                height: 50px;
                flex-grow: 1.0;
                background-color: midnightblue;
            }
            .child {
                position: absolute;
                height: 50px;
                width: 50px;
                top: 50px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="root">
            <span class="parent">
                <span class = "child">

                </span>
            </span>
        </div>
    
    </body>
</html>

image
@CatThingy CatThingy added the bug Something isn't working label Aug 2, 2022
@Weibye
Copy link
Collaborator

Weibye commented Aug 2, 2022

Thanks for the report!
I think the correct behavior would be that a node with PositionType: Absolute should be positioned as if it was the only child of its first immediate parent / ancestor that also has a PositionType: Absolute or the root node.

At the moment it is positioned as if it was the only child of its parent, which as you point out is not correct.

We need to verify the exact behavior in the specs before implementing a fix.

@nicoburns
Copy link
Collaborator

This isn't really a bug. It's a (currently) unsupported feature. The default value of position in CSS is static not relative, and the HTML recreation above relies on the parent node being position: static. If you add position: relative to the .parent styles in the above example then it will match Taffy's behaviour.

Taffy doesn't support position: static at all, with the two variants of the PositionType enum being Relative and Absolute. I believe this issue should be reframed as a feature request for support for position: static

@alice-i-cecile alice-i-cecile added enhancement New feature or request and removed bug Something isn't working labels Aug 14, 2022
@nicoburns nicoburns changed the title Incorrect position with PositionType::Absolute Request: Support position: static (absolute position relative a non-parent ancestor) Nov 25, 2022
@nicoburns nicoburns mentioned this issue Jan 30, 2023
Open
37 tasks
@nicoburns nicoburns mentioned this issue Oct 21, 2023
Closed
@nicoburns
Copy link
Collaborator

Yoga has started implementing this and has some test fixtures in this PR facebook/yoga#1434

@nicoburns nicoburns changed the title Request: Support position: static (absolute position relative a non-parent ancestor) Support position: static (absolute position relative a non-parent ancestor) Feb 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
🍬 Taffy Roadmap
Status: Todo
Milestone
No milestone
Development

No branches or pull requests
4 participants
@nicoburns @alice-i-cecile @Weibye @CatThingy