Scroll to class is unpredictable

Hello,

I’m working on a site that’s based off the Dental Studio demo. https://demo.tagdiv.com/newspaper_dentist/

In the menu bar, you can click on the various links and it will smooth scroll to the class indicated for each and it works with a fullscreen browser. However, if you view the page on mobile or shrink your browser horizontally such that it uses the mobile menus, there are problems with scrolling when clicking on links in the mobile menu. This happens in the demo so it’s not specific to my implementation.

To reproduce, with a fullscreen browser, click on “Team” in the menu. You’ll see that it scrolls right to the top of the blue section as expected. Now, on mobile, or with a horizontally shrunk browser window on desktop, use the “hamburger” menu to select “Team”, and you’ll see that scrolls to the wrong location. It’s way above the correct section.

Please advise.

Thanks,
Nick

It appears to be at least partly due to the following transform used on the menu:

.td-menu-mob-open-menu #td-outer-wrap {
position: fixed;
transform: scale3d(0.9, 0.9, 0.9);
-webkit-transform: scale3d(0.9, 0.9, 0.9);
-moz-transform: scale3d(0.9, 0.9, 0.9);
-ms-transform: scale3d(0.9, 0.9, 0.9);
-o-transform: scale3d(0.9, 0.9, 0.9);
-webkit-box-shadow: 0 0 46px #000000;
-moz-box-shadow: 0 0 46px #000000;
box-shadow: 0 0 46px #000000;
}