7

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.stack.imgur.com/O4wFW.jpg

3
  • I can't duplicate the stated behavior in Safari on MacOS. I scroll down to the input field, hover over it, click on it, tab to it, and no matter how it gets focus, no scrolling happens, the content stays put.
    – Kerri
    Apr 23, 2019 at 17:48
  • Very strange, I have just recorded a video of it: imgur.com/a/hPD9YuP
    – Helios
    Apr 23, 2019 at 18:49
  • 2
    I just checked, it doesn't happen in Safari 12.0.x, but it does happen to me on Safari 12.1
    – Helios
    Apr 23, 2019 at 19:02

2 Answers 2

2

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.

1
  • Found this fix after 3 hours of tearing my hair out trying to figure out why this was happening. It was also cancelling out any attached event handlers (via React). How this simple change impact Safari's event handling/scroll positioning I can't imagine, but it does. Thank you so much!
    – cole
    Jun 18, 2020 at 17:49
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.