CODEWITHSUNDEEP
htmlioscsssafarimobile-safari
Helios
Helios

Reputation: 487

Unwanted auto-scrolling to top on input focus, with Safari

I have this page:

    <html>

      <body>
        <div class="app">
          <div class="main-panel">
            <nav class="navbar"></nav>
            <div class="sidenav">
              <ul>
                <li>First</li>
                <li>2nd</li>
                <li>3rd</li>
                <li>4th</li>
              </ul>
            </div>
            <div class="page-container">
              <div class="placeholder">
                <ul>
                  <li>First</li>
                  <li>2nd</li>
                  <li>3rd</li>
                  <li>4th</li>
                </ul>
              </div>
              <input type="text">
            </div>
          </div>
        </div>
      </body>

    </html>

And the following css:

    html, body {
      height: 100%;
      width: 100%;
      position: fixed;
      overflow: visible; }

    .app {
      background-color: #f4f5f8;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto; }

    .main-panel {
      height: 100%;
      display: grid;
      grid-template-columns: 210px 1fr;
      grid-template-rows: 76px 1fr; }

    .navbar {
      grid-column: 1 / 3; }

    .page-container {
      overflow-y: auto;
      overflow-x: hidden; }

    .placeholder {
      display: block;
      height: 500px;
      width: 100%; }

Also available at: https://jsfiddle.net/1vk5jcuL/

On Safari 12.1 (MacOS and iOS), if you scroll down the main body and hover/focus over the input, it will automatically scroll to top.

I would like to keep the scrolling behavior the same (i.e. when you scroll you scroll only the main panel, not the side-nav, but safari shouldn't scroll to top on input focus.

This problem is purely about HTML + CSS, so no JS involved.

Edit: this is a GIF recording of it happening: https://i.sstatic.net/O4wFW.jpg

Upvotes: 7

Views: 3953

Answers (2)

Saravanan Ramupillai
Saravanan Ramupillai

Reputation: 757

Replace 1fr with minmax(0, 1fr) @helios. it worked for me. Here is the full explanation of it. https://css-tricks.com/preventing-a-grid-blowout/. I tested with your fiddle. it worked fine.

Upvotes: 1

Mark
Mark

Reputation: 575

set a max-height:100% on your page-container

.page-container
  overflow-y: auto
  overflow-x: hidden
  max-height: 100%

Upvotes: 0

Related Questions