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.

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

top position is wrong when previous item's height is 0.5, on 3x scale screen #1528

Open
hanleylee opened this issue Dec 19, 2023 · 1 comment

Comments

@hanleylee
Copy link

hanleylee commented Dec 19, 2023

Report

Issues and Steps to Reproduce

Anyone can reproduce it using below code(YogaKit (for iOS) 2.0.1)

import Foundation
import yoga

final class YogaTestVC: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        initView()
    }
}

// MARK: UI

extension YogaTestVC {
    private func initView() {
        view.backgroundColor = .black

        view.configureLayout { layout in
            layout.isEnabled = true
            layout.flexDirection = .column
            layout.alignItems = .stretch
            layout.justifyContent = .center
        }

        let containerView = UIView()
        containerView.backgroundColor = .white
        containerView.configureLayout { layout in
            layout.isEnabled = true
            layout.flexDirection = .column
            layout.alignItems = .stretch
        }
        view.addSubview(containerView)

        let view1 = UIView()
        view1.backgroundColor = .orange
        view1.configureLayout { layout in
            layout.isEnabled = true
            layout.height = YGValue(value: 50, unit: .point)
        }
        containerView.addSubview(view1)

        let view2 = UIView()
        view2.backgroundColor = .green
        view2.configureLayout { layout in
            layout.isEnabled = true
            layout.height = 0.5
        }
        containerView.addSubview(view2)

        let view3 = UIView()
        view3.backgroundColor = .orange
        view3.configureLayout { layout in
            layout.isEnabled = true
            layout.height = 50
        }
        containerView.addSubview(view3)

        view.yoga.applyLayout(preservingOrigin: true)
    }
}

Expected Behavior

The top position of view3 is 50.667 instead of 50.333, because the heights of view1 and view2 are 50, 0.667 respectively

Actual Behavior

The top position of view3 is 50.333

Screenshot

image

image

image

image

Explore

After check the source code, I found here will convert view3's top from 50.5 to 50.333, while textRounding is true.

// If a node has a custom measure function we never want to round down its
// size as this could lead to unwanted text truncation.
const bool textRounding = node->getNodeType() == NodeType::Text;
node->setLayoutPosition(
roundValueToPixelGrid(nodeLeft, pointScaleFactor, false, textRounding),
Edge::Left);
node->setLayoutPosition(
roundValueToPixelGrid(nodeTop, pointScaleFactor, false, textRounding),
Edge::Top);

Other

I suspect this issue is similar to #901, but can't be sure

@hanleylee hanleylee changed the title top position is wrong when previous item's height is float value, on 3x scale screen top position is wrong when previous item's height is 0.5, on 3x scale screen Dec 19, 2023
@NickGerleman
Copy link
Contributor

Yoga assumes every leaf node is YGNodeTypeText, which triggers ceil instead of round. This assumption is not correct when measure function is used to delegate to different layout system.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants