Menu icon Foundation
Migration F4E from version 6.0 to 6.2.1

Dear Foundation Support Team,

 

I'm currently using the old version 6.0 of Foundation for Sites in my Web Project. According to some bugs I wanted to update to the current version of the Framework - but there are some topics which thwart me doing this, the topics are:

  1. Sticky seems to stop working - although I compared the old code with the newone, without differences
  2. Scrolling on mobile is much slower as in the old version, feels like scrolling through glue or honey

Is there anything to do that sticky nav is working again and the scrolling is much faster? Scrolling on the default index page of the fresh checkout works fine, just after the migration id doesn't work properly. I disabled all custom js-code to be sure there's nothing which is causing this - without any affect.

Sticky-Bar is wrapped by an off-canvas-content element and has three top-bars in it.

  <body>

    <div id="offCanvasWrapper" class="off-canvas-wrapper" data-offcanvas>

      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

        <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

          {{> eas_off-canvas-sidebar}}

        </div>

        <div class="off-canvas-content clearfix" data-off-canvas-content>

          <div data-sticky-container>
            <div data-sticky data-options="marginTop:0;" style="width:100%">
            {{> eas_top-navigation}}
            {{> eas_main-navigation}}
            {{> eas_sub-navigation}}
            </div>
          </div>
          
          {{#if breadcrump}}
          <div class="row">
            <div class="large-12 columns">
              {{> eas_breadcrump}}
            </div>
          </div>
          {{/if}}
          
          <section class="eas_content">
            {{> body}}
          </section>
          
          {{> eas_footer}}

        </div>

      </div>

    </div>

    <script src="{{root}}assets/js/app.js"></script>
  </body>

Have you got any suggestions for that?

Thanks for your help!

MigrationFoundation for SitesF4E6.06.2.1

Dear Foundation Support Team,

 

I'm currently using the old version 6.0 of Foundation for Sites in my Web Project. According to some bugs I wanted to update to the current version of the Framework - but there are some topics which thwart me doing this, the topics are:

  1. Sticky seems to stop working - although I compared the old code with the newone, without differences
  2. Scrolling on mobile is much slower as in the old version, feels like scrolling through glue or honey

Is there anything to do that sticky nav is working again and the scrolling is much faster? Scrolling on the default index page of the fresh checkout works fine, just after the migration id doesn't work properly. I disabled all custom js-code to be sure there's nothing which is causing this - without any affect.

Sticky-Bar is wrapped by an off-canvas-content element and has three top-bars in it.

  <body>

    <div id="offCanvasWrapper" class="off-canvas-wrapper" data-offcanvas>

      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

        <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

          {{> eas_off-canvas-sidebar}}

        </div>

        <div class="off-canvas-content clearfix" data-off-canvas-content>

          <div data-sticky-container>
            <div data-sticky data-options="marginTop:0;" style="width:100%">
            {{> eas_top-navigation}}
            {{> eas_main-navigation}}
            {{> eas_sub-navigation}}
            </div>
          </div>
          
          {{#if breadcrump}}
          <div class="row">
            <div class="large-12 columns">
              {{> eas_breadcrump}}
            </div>
          </div>
          {{/if}}
          
          <section class="eas_content">
            {{> body}}
          </section>
          
          {{> eas_footer}}

        </div>

      </div>

    </div>

    <script src="{{root}}assets/js/app.js"></script>
  </body>

Have you got any suggestions for that?

Thanks for your help!

Rafi Benkual over 3 years ago

Hmm, testing on 6.2.1 seems to work fine: http://codepen.io/rafibomb/pen/NNYgOv

I don't see anything in the markup that would account for a difference. You have some custom CSS for the sticky nav? Maybe a live example would help with debugging it.

Martin over 3 years ago

Hi Rafi,

thanks for the effort of creating a codepen and testing it out.

After my post I also thought about the app.scss files and its includes. Today I was able to figure out, that this is not the problem I battle with. But I also have tried to use the sticky bar without the Off-Canvas Elements - which seems to be the difficulty.

Without the Off-Canvas Elements arount the sticky bar, it's working - but inside of the wrappers I didn't get it running, also with some extra "overflow: hidden" for body, html (etc.) and "overflow: scroll" for different elements inside of the off-canvas content / the content itsself.

Have you got any idea?

I've got to ask if a live example would be possible.

Thanks for your help, again.

Martin over 3 years ago

Hi Rafi,

I got it working - mistake was, that I gave the off-canvas-wrapper a height of 1% which was in order to the min-height of 100%. Both had been set for an footer, which always should be on the bottom.

Old code:

.off-canvas-wrapper {
  height: 1%;
  min-height: 100%;

  .off-canvas-wrapper-inner {
    min-height: 100%;
  }
}

New code:

.off-canvas-wrapper {
  min-height: 100%;

  .off-canvas-wrapper-inner {
    min-height: 100%;
  }
}

Thanks for your effort!