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

Open
opened 2023-12-18 22:07:54 -08:00 by hanleylee · 1 comment
hanleylee commented 2023-12-18 22:07:54 -08:00 (Migrated from github.com)

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.

7697be57a8/yoga/algorithm/PixelGrid.cpp (L84-L94)

Other

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

# Report - [ x] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate # Issues and Steps to Reproduce Anyone can reproduce it using below code(YogaKit (for iOS) 2.0.1) ```swift 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](https://github.com/facebook/yoga/assets/35610874/f6270a2a-f98a-481f-adcd-4189d6681bb6) ![image](https://github.com/facebook/yoga/assets/35610874/59d33d4f-b99b-4daa-ba01-e8865e3c4961) ![image](https://github.com/facebook/yoga/assets/35610874/cf7ff734-8138-457f-aa40-e76f41448e07) ![image](https://github.com/facebook/yoga/assets/35610874/606c11e2-8883-4d69-96f0-da9089d6cc10) # Explore After check the source code, I found here will convert `view3`'s top from `50.5` to `50.333`, while textRounding is `true`. https://github.com/facebook/yoga/blob/7697be57a86606e6019e4a978587ffc0e37cb84b/yoga/algorithm/PixelGrid.cpp#L84-L94 # Other I suspect this issue is similar to #901, but can't be sure
NickGerleman commented 2023-12-23 11:37:11 -08:00 (Migrated from github.com)

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.

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 in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1528
No description provided.