GithubHelp home page GithubHelp logo

Comments (13)

mockersf avatar mockersf commented on June 7, 2024

@nicoburns any idea?

from bevy.

nicoburns avatar nicoburns commented on June 7, 2024

Hmm... no that's weird. It looks like it's about the right size in the x axis but it's getting stretched by about a factor of 2 in the y axis :/

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

That because width is set, but height isn't. If you remove width from style, you'll see image big icons with correct proportions.

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

@mockersf I set height same as width and got
image
correct result. Is this change good enough solution, or someone should dig deeper and figure out why taffy changed behaviour?

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

For overflow_debug same thing: height is set, but width isn't. If add width: Val::Px(400.0),, then result
image
looks correct

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

But if this solution gets approve, then I think we should add some notes to Migration guide, because such things could be in bevy users code

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

Or better add some check/warning in bevy_ui::layout::convert::from_style(...) -> taffy::style::Style

from bevy.

mockersf avatar mockersf commented on June 7, 2024

Is this change good enough solution, or someone should dig deeper and figure out why taffy changed behaviour?

No, images should keep their ratio when you set only one of their dimension

from bevy.

nicoburns avatar nicoburns commented on June 7, 2024

Yeah, this definitely ought to be fixed in Taffy and/or bevy_ui (wherever the bug is)

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

@mockersf The problem hides in taffy, because at some point size fills None by measured_size which is done componentwise. So there Size(Some(45), None) becomes Size(Some(45), Some(100)) which has no correct ratio. Looks like there is no issue in taffy for such case.

from bevy.

nicoburns avatar nicoburns commented on June 7, 2024

I think the issue here is with the image measure function. It ought to read the image node's Style and use the size, min_size and max_size as part of it's computation. For most (all?) other "leaf" nodes this is automatically applied by Taffy, but that doesn't work for images because of their inherent aspect ratio.

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

I agree with your desire for universal approach, but IMO size is already width and height which we fill partially, and min_size and max_size is for clamping but not for ratio description, if there is width or height set only, image should be abble grow or reduce unlimitedly but proportionally. I read the contribution.md page of taffy, it says that behaviour must be similar as in chrome css render. That's why IMO we should make html example first (test?) for taffy and reproduce this issue. If chrome behaves as we expect, but taffy doesn't, then this is the basis for creating a well-formed issue in taffy project. Otherwise it should be local fix in bevy_ui, perhaps UiImage could autofill the width or height or better aspect_ratio in Style at some stage.

from bevy.

bugsweeper avatar bugsweeper commented on June 7, 2024

I didn't notice that bevy doesn't inform taffy about node types, that's why taffy can't make correct decision about size behaviour. I think Style::aspect_ratio is correct approach, I will make PR based on it.

from bevy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.