Problems with CF5 + Sticky positions (CSS3)

Kr

Kronosites 26 Sep, 2017

Hello!

I'm trying to use sticky position on containers and divs, but nothing works.
Is there a knowded bug with this CSS3 feature and CF5?

Example:
[list]Original code on CODEPEN (go to sticky positioning): https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here exactly the same code inside CF5: http://update.coupeclinicaltrial.com/test[/list]

Could someone tell me what is happening?
Thanks!

Here the full code:

>> HTML:

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

>> CSS3:

* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

Gr

GreyHead 28 Sep, 2017

Hi Kronosites ,

I've never seen thas mentioned as a problem - but that may mean that no-one else has tried.

The only thing I can see is that you have applied 'sticky' to the Alphabet letters - but they don't move relative to the surrounding div so it's hard to know whether it works or not.

Bob

Forums

Problems with CF5 + Sticky positions (CSS3)