scaleX CSS属性，Chrome上backgroundColor的奇怪行为

omvjsjqw 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(93)

我有以下用纯React编写的示例代码段：

import "./styles.css";

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        width: "100vw",
        height: "100vh",
        alignItems: "center"
      }}
    >
      <div
        style={{
          position: "relative",
          width: "100px",
          height: "100px",
          backgroundColor: "red"
        }}
      >
        <div
          style={{
            position: "absolute",
            height: "10px",
            width: "1px",
            backgroundColor: "pink",
            left: 0,
            bottom: 0,
            transformOrigin: "left",
            transform: "scaleX(100)"
          }}
        />
      </div>
    </div>
  );
}

这是一个非常简化的例子，因为它很容易理解。在代码中，你可以看到我是如何将一个1px的div放大100，这意味着它应该是100px，它是。但由于某些原因，在Chrome上，背景色没有填满整个div：

即使在检查中显示尺寸正确：

在Firefox上，它的行为符合预期：

添加沙盒示例：https://codesandbox.io/s/ecstatic-pond-636z2j?file=/src/App.js

google-chrome

来源：https://stackoverflow.com/questions/77160678/scalex-css-property-weird-behavior-with-backgroundcolor-on-chrome

1条答案

按热度按时间

xtfmy6hx1#

最有可能的是，您在浏览器或系统中进行了缩放。
您可能希望此.line显示由于一些事件（例如:hover）。
因此，让这条线有全宽和transform: scaleX(0);，直到这个事件发生：

body {
  margin: 0;
}

.box-wrapp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
}

.box:not(:hover) .line {
  transform: scaleX(0);
}

.line{
  position: absolute;
  height: 10px;
  background-color: pink;
  inset: auto 0 0;
  transform-origin: left center;
  transition: transform .4s;
}

<div class="box-wrapp">
  <div class="box">
    <div class="line"></div>
  </div>
</div>

赞(0）回复(0）举报 2023-09-28

我来回答

scaleX CSS属性，Chrome上backgroundColor的奇怪行为

1条答案

相关问题

热门标签

最新问答