Skip to content

When both position and transform are used simultaneously, the style display is disorganized #567

Open
@wqRan

Description

@wqRan

Affected version

0.16.0-beta.4

Flutter versions

3.16.0

No same issues found.

  • Yes, I search all issues but not found.

Steps to Reproduce

当position和transform同时使用时,样式未按照预期展示

Code example

<style> .angle-wrap { position: relative; width: 100px; height: 100px; background: pink; } .angle{ position: absolute; } .angle::before{ content: ""; display: block; border-width: 0 6px 6px; border-style: solid; border-color: transparent transparent #333740 } .top{ left: 50%; transform: translateX(-50%); top: 0; } .top::before { margin-top: -6px; transform: rotate(0deg); } .bottom{ left: 50%; transform: translateX(-50%); bottom: 0; } .bottom::before { margin-bottom: -6px; transform: rotate(180deg); } .left{ top: 50%; transform: translateY(-50%); left: 0; } .left::before { margin-left: -9px; transform: rotate(-90deg); } .right{ top: 50%; transform: translateY(-50%); right: 0px } .right::before { margin-right: -9px; transform: rotate(90deg); } </style>

Expected results

image

Actual results

image1

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions