CSS / SCSS的不同渲染行为

Rene 发表于 Dev

雷内

我已经尝试将这个示例与一些跳跃点集成在一起，以作为延迟加载其他脚本和图像的后备方法。

但是，如果我更改css，如下面的示例所示，在我的示例中，最后一个点看起来比其他两个点小（宽度更小？）。通过在我的codepen示例中使用相同的输入scss值，这些点将按预期方式显示：

此渲染： Codepen渲染：

我还检查了计算出的样式，我只能看到span元素的计算出的高度和宽度值有所不同。

为什么在此代码示例中在stackoverflow上（以及在我的localhost node.js示例中）看到的渲染与在Codepen上的示例相比却有所不同？

我是否必须查看codepen示例中的所有父DOM元素才能获得缺少的CSS部分？

class App extends React.Component {
	constructor(props) {
		super(props);

		this.state = {};
    
    }

    render() {
        return (
            <div id="wave">
                <span className="dot">
                </span>
                <span className="dot">
                </span>
                <span className="dot">
                </span>
            </div>
        );
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

html, body {
   margin:0;
   padding:0;
}

body {
   background:#F6F7F8;
}

div#wave {
   position: relative;
   margin-top: 5vh;
   text-align: center;
   width: 100px;
   height: 100px;
   margin-left: auto;
   margin-right: auto;
}

div#wave .dot {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   margin-right: 6px;
   background: #303131;
   animation: wave 1.3s linear infinite;
}

div#wave .dot:nth-child(2) {
   animation-delay: -1.1s;
}

div#wave .dot:nth-child(3) {
   animation-delay: -0.9s;
}

@keyframes wave {
   0%, 60%, 100% {
      transform: initial;
   }

   30% {
      transform: translateY(-15px);
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

<div id='container'></div>

我正在使用chrome浏览器（版本83.0.4103.97），如果有任何不同的话。

凯文TD

我计算了您的圆圈的像素，所有像素均为7px，最后一个像素为6px宽（理论上，根据您的CSS唯一的权利）：