Attachment 358139 Details for Bug 106062 – Difference in nested sticky positioning for viewport and internal scrolling

Difference in nested sticky positioning for viewport and internal scrolling

nestedstickycase.html (text/html), 1.58 KB, created by jonjohnjohnson on 2018-12-29 11:54:40 PST

(hide)

Description:

Filename:

MIME Type:

Creator: jonjohnjohnson

Created: 2018-12-29 11:54:40 PST

Size: 1.58 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>  <meta name="description" content="testcase">
>  <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, user-scalable=no">
>  <meta name="apple-mobile-web-app-capable" content="yes">
>  <title>testcase</title>
>  <style>
>    :root {
>      --cap-height:       calc(10vh + 1rem);
>      --cap-height-mag:   5;
>      --cap-height-full:  calc(var(--cap-height) * var(--cap-height-mag));
>      -webkit-overflow-scrolling: touch;
>    }
>    body {
>      margin: 0 0 0 50vw;
>    }
>    .overflown::after {
>      content: '';
>      display: block;
>      height: 200vh;
>      background: repeating-linear-gradient(#eee 0, #eee 2rem, #ccc 2rem, #ccc 4rem);
>    }
>    .scroll {
>      position: fixed;
>      z-index: 1;
>      height: 100%;
>      left: 0;
>      width: 50vw;
>      top: 0;
>      overflow-y: scroll;
>    }
>    .stick {
>      position: -webkit-sticky;
>      position: sticky;
>      top: calc(-1 * (var(--cap-height-full) - var(--cap-height)));
>      height: var(--cap-height-full);
>      background: url('//placekitten.com/801/801') center / cover;
>      display: flex;
>      align-items: center;
>    }
>    .stick .stick {
>      top: 0;
>      height: var(--cap-height);
>      padding: 0 1rem;
>      flex: 1 1 auto;
>      background: none;
>      color: #fff;
>    }
>  </style>
></head>
><body class="overflown">
>  
>  <div class="scroll overflown">
>    <div class="stick">
>      <div class="stick">internal scrolling nested sticky</div>
>    </div>
>  </div>
>  
>  <div class="stick">
>    <div class="stick">viewport scrolling nested sticky</div>
>  </div>
></body>
></html>

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="testcase">
  <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>testcase</title>
  <style>
    :root {
      --cap-height:       calc(10vh + 1rem);
      --cap-height-mag:   5;
      --cap-height-full:  calc(var(--cap-height) * var(--cap-height-mag));
      -webkit-overflow-scrolling: touch;
    }
    body {
      margin: 0 0 0 50vw;
    }
    .overflown::after {
      content: '';
      display: block;
      height: 200vh;
      background: repeating-linear-gradient(#eee 0, #eee 2rem, #ccc 2rem, #ccc 4rem);
    }
    .scroll {
      position: fixed;
      z-index: 1;
      height: 100%;
      left: 0;
      width: 50vw;
      top: 0;
      overflow-y: scroll;
    }
    .stick {
      position: -webkit-sticky;
      position: sticky;
      top: calc(-1 * (var(--cap-height-full) - var(--cap-height)));
      height: var(--cap-height-full);
      background: url('//placekitten.com/801/801') center / cover;
      display: flex;
      align-items: center;
    }
    .stick .stick {
      top: 0;
      height: var(--cap-height);
      padding: 0 1rem;
      flex: 1 1 auto;
      background: none;
      color: #fff;
    }
  </style>
</head>
<body class="overflown">
  
  <div class="scroll overflown">
    <div class="stick">
      <div class="stick">internal scrolling nested sticky</div>
    </div>
  </div>
  
  <div class="stick">
    <div class="stick">viewport scrolling nested sticky</div>
  </div>
</body>
</html>

Actions: View

Attachments on bug 106062: 181247 | 358139