react / react/yoga

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

Open
#1,528 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Algorithm
Dominant language
C++
Stars
18.9k
Forks
1.6k
Avg merge
1m
Merged PRs (30d)
1

Description

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.

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with yoga/algorithm/PixelGrid.cpp around lines 84-94, where the report says view3's top is rounded from 50.5 to 50.333 when textRounding is enabled. Reproduce the Swift YogaKit example on a 3x-scale screen and compare the behavior with issue #901; done means the reported layout places view3 at 50.667 for the 50-point and 0.5-point preceding views.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, swift
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.