Canvas Support

Jumping/choppy top nav transitions on scroll in Internet Explorer

2 replies · opened Jul 30, 2017

WwemakethemotormoveJul 30, 2017

Love Canvas, but we've run into a show stopper with which we need help.

We've tested this on a number of desktops, laptops, and mobile clients, viewing both our internal site (not yet available to the public) and the Canvas demo site at Semicolonweb.com. The format we're most interested in is Corporate 3 (http://themes.semicolonweb.com/html/canvas/index-corporate-3.php).

  1. In IE 10/11, the top nav appears to jump vertically (up and then back to its intended position) when the transition is triggered, and the transition is always choppy. The problem is more dramatic with mouse-wheel scroll, but it also occurs when dragging the scroll bar to scroll.

  2. In Firefox and mobile Safari we see a less dramatic form of the same behavior, but the transition is just as choppy.

  3. Once the top nav transition has completed it behaves normally until triggered again by scrolling back up to the top of the page. The problem occurs at the initiation of the transition (the jump), and during the transition (choppy).

  4. Chrome is smooth as butter in everything it does, as is Edge and several other browsers.

  5. The problem is worse when the header has animations, transitions, or parallax.

We've tried to make a number of adjustments, without any success in addressing the problem.

Another template (from a different vendor - "Ready" at http://ecologytheme.com/theme/ready/index.html) seems smooth in all browsers we have tested, so we believe/hope that we can somehow bring that same smoothness to Canvas so that we can continue our build-out.

Any assistance is appreciated. Thank you!

WwemakethemotormoveAug 1, 2017

Anyone?

SSemicolon WebSTAFFAug 2, 2017

Hello,

Thank You so much for your Patience! We have been working on many variations for this, however the solution that worked best for us is the following TINY CSS code: 

@media (min-width: 992px) {
	#header,
	#header-wrap {
		position: absolute;
		width: 100%;
	}
}

However, this will currently only work for Pages that has the Headers as the First on the Page. We will continue testing this and fix this across all the templates soon and then release a fix for this. Thanks for your Patience.

Hope this Helps!

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard