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

fix: style fail after resize #916

Merged
merged 18 commits into from Dec 9, 2021
Merged

fix: style fail after resize #916

merged 18 commits into from Dec 9, 2021

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Nov 26, 2021

Closes #944
Closes #945

  • 修复容器 resize 后 style 未对应进行 resize。

    1. 在 renderStyle 重构后每次重新 layout 都会调用 width/height 的 computedValue getter,在 getter 中会对 vw, rem 这种相对单位进行重新计算,而 window resize 已经对 html 重新设置了 viewportSize 会触发 html 重新 layout,layout 会从上向下递归,所以理论上原来递归 element 重新 markNeedsLayout 的逻辑是多余的。但是原代码有两处实现导致 viewportSize 无法顺利向下传递:

      • body element 上不应该主动设置 width,block 的 display 为 block 会继承 parent 的 width。
      • image element 的 RenderImage 的 layout 实现依赖了 width/height,导致 resize 时 image size 不会更新,对于 intrinsicRatio 的约束逻辑在 RenderIntrinsic 的 constraints 中已处理,因此 RenderImage 的 layout 中不需要再额外对 ratio 进行处理,直接继承 RenderIntrinsic 的 constraints 即可。
    2. 删除 RenderIntrinsic 中计算 size 多余逻辑。

  • 修复 flex-item 纵轴 stretch 判断条件不完全。 flex 布局下 align-self 为非 stretch 的 flex item 不应该拉伸 #944

  • 修复 image 的 property 与 style 上的 width/height 优先级判断逻辑出错导致已有 width property 的情况下改变 width property 不生效。 image 在已有width property 的情况下改变 width property 不生效 #945

@temper357 temper357 changed the title [WIP] fix: style fail after resize fix: style fail after resize Nov 29, 2021
@tylorvan
Copy link

After merged this PR, it works.

kraken/lib/widget.dart Outdated Show resolved Hide resolved
@temper357 temper357 changed the title fix: style fail after resize [WIP] fix: style fail after resize Dec 2, 2021
@temper357 temper357 changed the base branch from main to refactor/layout-performance December 3, 2021 09:03
@temper357 temper357 changed the title [WIP] fix: style fail after resize fix: style fail after resize Dec 6, 2021
Base automatically changed from refactor/layout-performance to main December 7, 2021 06:56
temper357 and others added 5 commits December 7, 2021 15:29
…tyle-fail

# Conflicts:
#	kraken/lib/src/dom/elements/img.dart
…into fix/resize-style-fail

# Conflicts:
#	integration_tests/specs/dom/elements/img.ts
#	kraken/lib/src/dom/elements/img.dart
…tyle-fail

# Conflicts:
#	integration_tests/specs/dom/elements/img.ts
#	kraken/lib/src/dom/elements/img.dart
@answershuto answershuto merged commit ab8e2d4 into main Dec 9, 2021
@answershuto answershuto deleted the fix/resize-style-fail branch December 9, 2021 03:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
6 participants