纸张复选框和-webkit-column-count

Question

这是我已经研究了一段时间的东西，但我无法找出这里发生的事情。

在此 example 上，您可以看到如何使用 css 规则 -webkit-column-count.[= 将复选框列表分布在 div 上13=]

问题是复选标记出于某种原因在除第一列以外的所有列上都被隐藏了。你有解决这个问题的建议吗？

这里我附上了一个小例子，但请查看我的 jsfiddle 以更好地描述情况。谢谢！

.valueLabel {
  /* height: 24px; */
  padding: 7px 12px;
  width: 400px;
}
.valueLabel paper-checkbox {
  margin-right: 12px;
}
.valueLabel paper-checkbox::shadow #ink[checked] {
  color: #f39200;
}
.valueLabel paper-checkbox::shadow #checkbox.checked {
  border-color: #f39200;
  background-color: #f39200;
  /* Version 0.7 paper-checkbox */
}
/* COLUMNS */

.valuesContainer {
  overflow-y: scroll;
  padding: 0px 16px;
}
.valuesContainer > #valuesDiv {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 0px;
  -moz-column-gap: 0px;
  column-gap: 0px;
}
.valuesContainer > #valuesDiv .valuesGroup {
  display: inline-block;
}
.valuesContainer > #valuesDiv .valuesGroup > span {
  text-transform: uppercase;
}
/* LAYOUT WRAP */

.valuesContainer > core-label {
  width: 30%;
  /* 3 COLUMNS */
  line-height: 16px;
  font-size: small;
}
.valuesContainer > #valuesDiv core-label.valueLabel {
  display: inline-flex;
}
/* FIX THAT I USED TO SHOW ALL CHECKS WHEN THEY ARE ON COLUMNS, USED ON PAPER ELEMENTS >= v0.7 */

/* IT DOES NOT WORK ANYMORE */

.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {
  position: fixed;
  margin-top: 2px;
  margin-left: 2px;
}

<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html">
<div class="valuesContainer">
  <div id="valuesDiv">
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-0">
      <paper-checkbox id="1" checked></paper-checkbox>
      <div>January</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-1">
      <paper-checkbox id="2"></paper-checkbox>
      <div>February</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-2">
      <paper-checkbox id="3" checked></paper-checkbox>
      <div>March</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-3">
      <paper-checkbox id="4" checked></paper-checkbox>
      <div>April</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-4">
      <paper-checkbox id="5"></paper-checkbox>
      <div>May</div>
    </core-label>

  </div>
</div>

Answer 1

您运行遇到了渲染错误。尝试纠正此问题的一种方法是强制 GPU 渲染。有几种方法可以做到这一点，我最喜欢的是使用 transform:translate3d(0,0,0)。然而，问题是需要它的元素 (#checkbox.checked #checkmark) 已经有一个转换。您可以通过设置背面可见性来获得相同的结果。我在下面的演示中使用以下规则执行此操作：

.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {
   ...
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
}

演示

.valueLabel {
  /* height: 24px; */
  padding: 7px 12px;
  width: 400px;
}
.valueLabel paper-checkbox {
  margin-right: 12px;
}
.valueLabel paper-checkbox::shadow #ink[checked] {
  color: #f39200;
}
.valueLabel paper-checkbox::shadow #checkbox.checked {
  border-color: #f39200;
  background-color: #f39200;
  /* Version 0.7 paper-checkbox */
}
/* COLUMNS */

.valuesContainer {
  overflow-y: scroll;
  padding: 0px 16px;
}
.valuesContainer > #valuesDiv {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 0px;
  -moz-column-gap: 0px;
  column-gap: 0px;
}
.valuesContainer > #valuesDiv .valuesGroup {
  display: inline-block;
}
.valuesContainer > #valuesDiv .valuesGroup > span {
  text-transform: uppercase;
}
/* LAYOUT WRAP */

.valuesContainer > core-label {
  width: 30%;
  /* 3 COLUMNS */
  line-height: 16px;
  font-size: small;
}
.valuesContainer > #valuesDiv core-label.valueLabel {
  display: inline-flex;
}
/* FIX THAT I USED TO SHOW ALL CHECKS WHEN THEY ARE ON COLUMNS, USED ON PAPER ELEMENTS >= v0.7 */

/* IT DOES NOT WORK ANYMORE */

.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {
  position: fixed;
  margin-top: 2px;
  margin-left: 2px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html">
<div class="valuesContainer">
  <div id="valuesDiv">
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-0">
      <paper-checkbox id="1" checked></paper-checkbox>
      <div>January</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-1">
      <paper-checkbox id="2"></paper-checkbox>
      <div>February</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-2">
      <paper-checkbox id="3" checked></paper-checkbox>
      <div>March</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-3">
      <paper-checkbox id="4" checked></paper-checkbox>
      <div>April</div>
    </core-label>

    <core-label class="valueLabel" horizontal="" layout="" id="core-label-4">
      <paper-checkbox id="5"></paper-checkbox>
      <div>May</div>
    </core-label>

  </div>
</div>

纸张复选框和-webkit-column-count

Paper checkbox and -webkit-column-count

css

polymer

dart-polymer

演示