absolute child element percent length of left/top/right/bottom/width/height calcuated different compared with web #850

qcclcr · 2019-01-07T07:23:50Z

Report

I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

I found in yoga when absolute child element has percent length, it calculate base on parent‘s contentEdge but not padding Edge（which should be， https://www.w3.org/TR/CSS2/box.html#padding-edge
https://www.w3.org/TR/CSS2/visuren.html#propdef-left）。

As CSS defines：

Left，Like 'top', but specifies how far a box's left margin edge is offset to the right of the left edge of the box's “containing block”. For relatively positioned boxes, the offset is with respect to the left edge of the box itself.

10.1 Definition of "containing block"
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

1、The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.
2、For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.
3、If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
4、**If the element has 'position: absolute'**, the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
    a、In the case that the ancestor is an inline element, the containing block is the bounding box 
          around the padding boxes of the first and the last inline boxes generated for that element. In 
          CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
    b、Otherwise, the containing block is formed by the **padding edge of the ancestor**.
    If there is no such ancestor, the containing block is the initial containing block.

Expected Behavior

height of child is expected to be 1000px * 50% = 500px; and in web it is 500px

Actual Behavior

but in yoga it's value is (1000px - 200px -200px) * 50% = 300px

Link to Code

First Demo, if child is absolute , it is wrong

<html>
<body>
  <div class="heightWidthPaddingVertical" style="position: relative; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; width:750px; height:1000px; padding-top:200px;
  padding-bottom:200px; background-color:green;">
    <div class="heightWithPercent" style="position:absolute; box-sizing:border-box; width:750px; height:50%; background-color:red;"></div>
  </div>
</body>
</html>

Second Demo, if child is relative, it is right as web

<html>
<body>
  <div class="heightWidthPaddingVertical" style="position: relative; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; width:750px; height:1000px; padding-top:200px;
  padding-bottom:200px; background-color:green;">
    <div class="heightWithPercent" style="position:relative; box-sizing:border-box; width:750px; height:50%; background-color:red;"></div>
  </div>
</body>
</html>

When applicable, use this fiddle to post a web repro.
@emilsjolander @woehrl01 @davidaurelio

The text was updated successfully, but these errors were encountered:

davidaurelio · 2019-01-28T20:47:19Z

Thanks for reporting. I will have to verify whether a fix is viable.

Unfortunately, we have a vast amount of code at FB that depends on Yoga, and we might not be able to fix all bugs.

Sharcoux · 2019-03-06T13:09:37Z

React-Native depends on Yoga, and React-Native-Web depends on React-Native. That's a lot of projects depending on Yoga. If Yoga doesn't follow the specs but only Facebook own interpretation of the specs, I think I would rather stop relying on it too much...

wjlotus1992 · 2019-07-09T12:53:14Z

I also have this problem and hope fix this bug as soon as possbile

Sharcoux · 2019-07-09T13:56:22Z

Thanks for reporting. I will have to verify whether a fix is viable.

Unfortunately, we have a vast amount of code at FB that depends on Yoga, and we might not be able to fix all bugs.

That is really scary when you know that apparently, no one is able to keep contributing to Yoga nor react-native. I am trying to contribute for months to Yoga and React-Native, but I still couldn't, despite asking for help on both projects github pages, on the discord, I even tried to send a message to the last contributor via Facebook out of despair.

Weey0001 · 2019-07-12T12:44:36Z

hi, i have a child element that i want have 100% of the width of the windows without change the parent vue , how can i fix it ?

woehrl01 · 2020-06-11T15:52:43Z

Hi @qcclcr,

I just pushed a fix for that bug. Let's see how this will be decided by Facebook's current maintainer.

davidaurelio · 2020-06-19T21:51:15Z

@SidharthGuglani could you take a look, please? Thank you!

goodgoodbigbig · 2020-08-24T15:52:15Z

Hi @qcclcr,

I just pushed a fix for that bug. Let's see how this will be decided by Facebook's current maintainer.

I tried your solution. But it seem wrong in the following test case

YGNodeRef root = YGNodeNew();
    YGNodeStyleSetWidth(root, 288);
    YGNodeStyleSetHeight(root, 288);
    YGNodeStyleSetFlexShrink(root, 1);
    YGNodeStyleSetAlignItems(root, YGAlign::YGAlignFlexStart);
    YGNodeStyleSetJustifyContent(root, YGJustify::YGJustifyFlexStart);
    // YGNodeStyleSetFlexDirection(root, YGFlexDirection::YGFlexDirectionRow);
    YGNodeStyleSetFlexDirection(root, YGFlexDirection::YGFlexDirectionColumn);


    YGNodeRef parent = YGNodeNew();
    YGNodeStyleSetHeight(parent, 24);
    YGNodeStyleSetFlexDirection(parent, YGFlexDirectionRow);
    YGNodeStyleSetAlignItems(parent, YGAlign::YGAlignFlexStart);
    YGNodeStyleSetAlignItems(parent, YGAlign::YGAlignFlexStart);
    YGNodeStyleSetFlexShrink(parent, 1);
    YGNodeStyleSetPositionType(parent, YGPositionTypeRelative);

    YGNodeInsertChild(root, parent, 0);

    YGNodeRef child1 = YGNodeNew();
    YGNodeStyleSetHeight(child1, 24);
    YGNodeStyleSetWidth(child1, 48);
    YGNodeStyleSetFlexShrink(child1, 1);

    YGNodeRef child2 = YGNodeNew();
    YGNodeStyleSetHeight(child2, 24);
    YGNodeStyleSetWidthPercent(child2, 100);
    YGNodeStyleSetFlexShrink(child2, 1);
    YGNodeStyleSetPositionPercent(child2, YGEdge::YGEdgeLeft, 50);
    YGNodeStyleSetPositionPercent(child2, YGEdge::YGEdgeBottom, -100);
    YGNodeStyleSetPositionType(child2, YGPositionTypeAbsolute);
    
    
    YGNodeInsertChild(parent, child1, 0);
    YGNodeInsertChild(parent, child2, 1);

    YGNodeCalculateLayout(root, 600, 600, YGDirectionLTR);

    YGNodePrint(root, YGPrintOptionsChildren);

    YGTraversePreOrder(root, [](YGNodeRef node) {
        float w = YGNodeLayoutGetWidth(node);
        float h = YGNodeLayoutGetHeight(node);
        float l = YGNodeLayoutGetLeft(node);
        float t = YGNodeLayoutGetTop(node);
        YGNodePrint(node, YGPrintOptionsLayout);
        std::cout << std::endl
                  << node << ": " << w << "x" << h 
                  << "   l:" << l << ", t: " << t 
                  << std::endl;
    });

child2 is expected to 48x24 l:24, t: 24, but the result is 288x24 l:144, t: 288

…h web" behind experimental feature (facebook#1028) Fixes facebook#850 facebook#850 describes a conformance issue where positioning of an absolute child using percentages is not calculated againt the correct box size. This takes the fix for that in facebook#1028, regenerates tests, and fixes tests so that the experimental feature can be enabled. Goal is to run this as an experiment internally to see if we can enable by default. Changelog: [Internal]

…h web" behind experimental feature (#1028) (#1201) Summary: Fixes facebook/yoga#850 facebook/yoga#850 describes a conformance issue where positioning of an absolute child using percentages is not calculated against the correct box size. This takes the fix for that in facebook/yoga#1028, regenerates tests, and fixes tests so that the experimental feature can be enabled. Goal is to run this as an experiment internally to see if we can enable by default. Changelog: [Internal] X-link: facebook/yoga#1201 Reviewed By: yungsters Differential Revision: D42282358 Pulled By: NickGerleman fbshipit-source-id: 57c0dd9b0f1c47cb9335ff6e13d44b4646e5fa58

Summary: This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. I also fixed a reversal of `height` and `width` in one place compared to the original PR, and enabled a significantly more edge-casey fix without the errata. Differential Revision: D45763574 fbshipit-source-id: 00471f861dc6022a3f3f4842b90b6a4237b0917d

Summary: X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Differential Revision: https://internalfb.com/D45763574 fbshipit-source-id: 787acafe038f6988a2fc6603243789a67e913529

Summary: X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Differential Revision: D45763574 fbshipit-source-id: 4431a112bec22921d9a0e842701d87c876798f2d

Summary: X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Differential Revision: https://internalfb.com/D45763574 fbshipit-source-id: 5eb2f3bf551a8765e384a19b8df77a13628529bd

Summary: Pull Request resolved: facebook#37376 X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Reviewed By: yungsters Differential Revision: D45763574 fbshipit-source-id: 4c1257cb0babf391d9327365e8e1ca56623d4286

Summary: X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Differential Revision: https://internalfb.com/D45763574 fbshipit-source-id: 1ec48dbc521c259f45cee03635e02efaae5b40bd

Summary: Pull Request resolved: facebook#37376 X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Reviewed By: yungsters Differential Revision: D45763574 fbshipit-source-id: 2811aeba3c24621557f294eee7f4bfb170e9e5ab

Summary: X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Differential Revision: https://internalfb.com/D45763574 fbshipit-source-id: 6658adb99ad997518b17b5070a5939a664239384

Summary: Pull Request resolved: facebook#37376 X-link: facebook/yoga#1290 This change default-enables a bugfix to Yoga's handling of absolute-positioned children sized using percentages. Yoga previously measured percentage of the box without padding, where the W3C spec, and browser behavior verified by test, use the padding box instead. See facebook/yoga#850 for more details of the backing issue. I have so far left this behind a `YGExperimentalFeature`, because it will change the dimensions of existing views which use absolute percentages with parent padding. This change moves it from a `YGExperimentalFeature` to `YGErrata`. This means the conformant path is enabled by default, but users of `YGErrataClassic` and `YGErrataAll` will stay on the previous behavior. Right now the name is `PercentAbsoluteOmitsPadding` as something that tries to explain the issue in lay-terms and be a little less long than the old one, but I am open to other ideas. Reviewed By: yungsters Differential Revision: D45763574 fbshipit-source-id: a5e17e2efd5478a236cf585f2bf67c6b823539e3

…h web" behind experimental feature (facebook#1028) (facebook#1201) Summary: Fixes facebook/yoga#850 facebook/yoga#850 describes a conformance issue where positioning of an absolute child using percentages is not calculated against the correct box size. This takes the fix for that in facebook/yoga#1028, regenerates tests, and fixes tests so that the experimental feature can be enabled. Goal is to run this as an experiment internally to see if we can enable by default. Changelog: [Internal] X-link: facebook/yoga#1201 Reviewed By: yungsters Differential Revision: D42282358 Pulled By: NickGerleman fbshipit-source-id: 57c0dd9b0f1c47cb9335ff6e13d44b4646e5fa58

qcclcr changed the title ~~absolute child element percent length of left/top/right/bottom/width/height calcuated wrong compared with web~~ absolute child element percent length of left/top/right/bottom/width/height calcuated different compared with web Jan 10, 2019

davidaurelio self-assigned this Jan 28, 2019

davidaurelio added the bug label Jan 28, 2019

woehrl01 mentioned this issue Jun 11, 2020

Fix absolute position when padding on parent in place #1016

Open

davidaurelio removed their assignment Jun 19, 2020

dislon mentioned this issue Sep 1, 2020

Fix percent absolute position and size calcuate different with web #1028

Closed

garrynewman mentioned this issue Sep 3, 2021

Child panels with absolute position should not calculate parent padding with respect to width/height. Facepunch/sbox-issues#855

Closed

NickGerleman added the Algorithm label Oct 4, 2022

NickGerleman mentioned this issue Dec 29, 2022

Import "Fix percent absolute position and size calcuate different with web" behind experimental feature (#1028) #1201

Closed

facebook-github-bot closed this as completed in 7e96b65 Jan 8, 2023

NickGerleman mentioned this issue May 11, 2023

Add errata "PercentAbsoluteOmitsPadding" #1290

Closed

NickGerleman mentioned this issue May 11, 2023

Add errata "PercentAbsoluteOmitsPadding" (#1290) facebook/react-native#37376

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

absolute child element percent length of left/top/right/bottom/width/height calcuated different compared with web #850

absolute child element percent length of left/top/right/bottom/width/height calcuated different compared with web #850

qcclcr commented Jan 7, 2019 •

edited

davidaurelio commented Jan 28, 2019

Sharcoux commented Mar 6, 2019

wjlotus1992 commented Jul 9, 2019

Sharcoux commented Jul 9, 2019

Weey0001 commented Jul 12, 2019

woehrl01 commented Jun 11, 2020

davidaurelio commented Jun 19, 2020

goodgoodbigbig commented Aug 24, 2020

absolute child element percent length of left/top/right/bottom/width/height calcuated different compared with web #850

absolute child element percent length of left/top/right/bottom/width/height calcuated different compared with web #850

Comments

qcclcr commented Jan 7, 2019 • edited

Report

Issues and Steps to Reproduce

Expected Behavior

Actual Behavior

Link to Code

davidaurelio commented Jan 28, 2019

Sharcoux commented Mar 6, 2019

wjlotus1992 commented Jul 9, 2019

Sharcoux commented Jul 9, 2019

Weey0001 commented Jul 12, 2019

woehrl01 commented Jun 11, 2020

davidaurelio commented Jun 19, 2020

goodgoodbigbig commented Aug 24, 2020

qcclcr commented Jan 7, 2019 •

edited