位置粘性iPhone闪烁

Question

跟随我的一小段代码。只是想知道为什么“ iphone”单元仅从iphone闪烁。 PS。我不能使用表格或列表作为结构。我也尝试使用transform: translate3d(0,0,0);。

基本上，我也需要第一个单元格同时在iPhone和iPad上同时保持Left和Top的粘性。我只想使用HTML和CSS来做到这一点。

.table{
  width: 2000px;
  position: relative;
}
.tr{
  overflow:show;
  display:block;
  white-space: nowrap;
  font-size:0;
}
.tc {
  border:1px solid #DDD;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size:12px;
}
.trh {
  background:#000;
  color:#FFF;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:1;
}
.tc.first{
  background:#000;
  color:#FFF;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}

<div class="table">
	<div class="tr trh">
		<div class="tc first">Iphone</div>
		<div class="tc">value</div>
		<div class="tc">value</div>
		<div class="tc">value</div>
		<div class="tc">value</div>
		<div class="tc">value</div>
		<div class="tc">value</div>
		<div class="tc">value</div>
		<div class="tc">value</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">2</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
	</div>
	<div class="tr">
		<div class="tc first">a set</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
		<div class="tc">0</div>
	</div>
</div>

Answer 1

如果您固定Iphone电池的位置，是否有助于闪烁？它在浏览器中的功能相同。

将带有iPhone文字的HTML更改为：<div class="tc fixedCell">Iphone</div>

下面添加到CSS：

.fixedCell {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #000;
  text-align: center;
  font-size:12px;
  color:#FFF;
  z-index: 2;
}