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

wqRan · 2024-03-09T02:55:34Z

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

Expected results

Actual results

wqRan · 2024-03-09T03:59:50Z

    代码如下
    <!DOCTYPE html>
    <html>
    <head>
        <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>
    </head>
    <body>
    <div class="container">
      <div class="angle-wrap">
        <div class="angle top"></div>
        <div class="angle bottom"></div>
        <div class="angle left"></div>
        <div class="angle right"></div>
      </div>
    </div>
    
    </body>
    </html>

wqRan added the bug Something isn't working label Mar 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

wqRan commented Mar 9, 2024

wqRan commented Mar 9, 2024

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

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

Comments

wqRan commented Mar 9, 2024

Affected version

Flutter versions

No same issues found.

Steps to Reproduce

Code example

Expected results

Actual results

wqRan commented Mar 9, 2024