Materialize: Issue with Tabs Jumping Scroll Position

[Anthall]

Hi, I've set up some materialze tabs, when I click on each of the tabs it's jumping the scroll position of the page upwards as if it's got a page anchor on it. (See Screen Gif below).

Does anyone know whats happened here? This is my tab code...

<div class="row">
  <div class="col s12">
    <ul class="tabs bhivetabs"><li class="tab col s4"><a class="active" href="#tablets" target="_blank">Tablets and Capsules</a></li><li class="tab col s4"><a href="#drugs" target="_blank">Controlled Drug Liquids</a></li><li class="tab col s4"><a href="#amps" target="_blank">Ampoules</a></li>
    </ul>
  </div>
  <div class="col s12" id="tablets">
    <p>[ciscode|rev=1|tool=elmsmedia|item=1256|entity_type=node|render=link|field=field_image|text=Tablet Flow Chart|target=_blank|delta=0|item_type=image|alt=Tablet Flow Chart|width=933|height=489]&nbsp;
    </p>
  </div>
  <div class="col s12" id="drugs">
    <p>[ciscode|rev=1|tool=elmsmedia|item=1257|entity_type=node|render=link|field=field_image|text=Liquid Flow Chart|target=_blank|delta=0|item_type=image|alt=Liquid Flow Chart|width=933|height=489]&nbsp;
    </p>
  </div>
  <div class="col s12" id="amps">
    <p>[ciscode|rev=1|tool=elmsmedia|item=1258|entity_type=node|render=link|field=field_image|text=Ampoule Flow Chart|target=_blank|delta=0|item_type=image|alt=Ampoule Flow Chart|width=933|height=489]&nbsp;
    </p>
  </div>
</div>

[tomscholz]

@Anthall Code you also provide a codepen? I can't reproduce your problem

[Anthall]

I've just set up a codepen but it works fine here. This is the code i'm using though...

http://codepen.io/Hornetant/pen/LbzJbJ

It happens regardless of it being an image within the tab or just a line of text.

[tomscholz]

@Anthall Is your website WordPress based/ are you using any anchor plugins, jquery... anything?

[johann-abraham]

hi @tomscholz, I encountered the same issue as @Anthall, I made a codepen that shows the problem here:
http://codepen.io/johann_abraham/pen/yVPJme

If you scroll all the way to the bottom and then change tabs you'll see the browser window jumps up.

[Anthall]

Yes this is the same problem as mine. My website is Drupal based.

[johann-abraham]

For anyone stuck with this issue right now, the quick workaround is to just add some content beneath the tabs, take a look at this codepen which doesn't jump:
http://codepen.io/johann_abraham/pen/aBErGQ

A nice footer will probably do the trick.

I'm hoping to have some time this weekend to figure out exactly what's going on but the above is a workaround for now.

[johann-abraham]

@Anthall & @tomscholz I made a PR that is a fix, hopefully it will get merged before 1.0 :)

[acburst]

Merged

[gfazioli]

Merged where? I still got it on 0.98.1, any news about preventing the scroll page?

[nfgallimore]

This issue still occurs for me, but just on iOS. I tried loading both codepens mentioned above on an iPhone and an iMac and the issue is still occurring. (Regardless of the footer). It works fine on Windows. Can we reopen this issue please?