Canvas Support

Sticky-header-shrink bug

11 replies · opened Jun 17, 2020

RRos777Jun 17, 2020

Hello again team SemiColon!
I have 2 small issues on Canvas 6.
Here's the online link for your viewing: https://www.aftershock.co.za/approvals/ipps/

  1. Sticky-header-shrink.
    Im on Chrome for Mac. See attached 01.jpg. Please scroll down to the exact position as indicated by the red arrow. You'll notice there's a small 'vibration' movement on the page in this position. It looks like the 'sticky-header-shrink' class wants to kick in, but doesn't, causing a small 'vibration' or jumping up and down. How can I fix this?

  2. Centering contents
    Please see 02.jpg attached. I tried helper classes .divcenter and .center, but on mobile view, I just cannot get the grid filter to center. On desktop, I'd like to keep it left aligned. Would you be able to assist me?

I look forward to hearing from you. Thanks for all your help.
Ros

SSemicolon WebSTAFFJun 17, 2020

Hello,

  1. Thanks for reporting this. We will need more time to investigate this to find out exactly what is going on. So we will get back to you soon on this.

  2. Please consider using the .justify-content-center Class instead to make the Content centered.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

RRos777Jun 18, 2020

Thank you for your reply.

  1. Hope to hear from you soon re the issue.
  2. Thanks, but as mentioned, I'd like to keep it left aligned for desktops, but centered on mobile view. .justify-content-center does however work nicely, except that its now also centered on desktops also.
RRos777Jun 22, 2020

Good morning guys!

Just checking in to see if there have been any further developments in resolving the first issue above?

Thanks
Rosika

RRos777Jun 23, 2020

Good morning Team SemiColonWeb!

The issue continues on the site. Scroll right down on this page: https://www.aftershock.co.za/approvals/ipps/content-page.html
You'll notice a slight vibration on the main menu.

I have attached another screenshot, this one based on the above link. "sticky-header-shrink" seems to be the issue. I apologise for being pressing, but I am increasingly worried about this bug as I continue to develop the content pages for this site. It's going to be a large site, so would like to minimise any potential page-to-page corrections. Could I ask you to please revert at soonest with a fix?

Thanks.
Ros

SSemicolon WebSTAFFJun 23, 2020

Hello,

Thanks for your Patience regarding this.

We have been checking this out for a while and the issue does not appear to exist on the Latest Versions of Canvas: http://themes.semicolonweb.com/html/canvas/menu-7.html . So we would highly recommend you to update the Latest Version as this should fix the issue altogether.

Additionally, regarding the Page Title jump, we have released fixes for this in the Latest Update.

Now, with the Latest Update, we are handling the Logo Sizes using CSS, so simply using the following code will work fine:


#logo img {
	height: 120px;
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

RRos777Jun 25, 2020

Hello again guys

Thanks for the feedback. I redid the pages again based on your menu-7.html and still cannot figure out what went wrong, but it seems that both the 'jumping issue' and the logo height problems have been sorted out.

However, I have another logo issue now on IE 11. Yes, I know, IE is from the devil and I am sure you probably hate it as much as I do, but according to your details, the template should be IE 11 compatible.

So, please have a look at the attached again. I ran this through IE 11 on Browserling to test and the logo doesn't display properly.

https://www.aftershock.co.za/approvals/ipps/content-page.html

Is there a fix for this?

SSemicolon WebSTAFFJun 25, 2020

Hello,

Yes IE is frustrating. :) We have checked this out for you and the issue is not with the Logo sizing, but with the Logo Image. The Logo Image you are using is SVG which is likely to be causing issues in IE11 due to the non-existent preserveAspectRatio Setting. We recommend you to set a relevant setting for this and test this again. Meanwhile, if you use a PNG/JPG Image for the Logo, this will work absolutely fine in IE11.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

RRos777Jun 26, 2020

Thanks for the info. I prefer the SVG images because its just displays a lot better. Then, is there a way to make use of a PNG image for IE users? I suppose that's asking too much, but if you don't ask, you wont know. Let me know if possible somehow?

SSemicolon WebSTAFFJun 26, 2020

Hello,

We definitely agree with you with the usage of SVG Images. It definitely delivers crisp images on every device.

Unfortunately, there is no built in way to switch images depending on Different Browsers. You might need to use Custom Codes for this. however, as mentioned in our previous reply, using the preserveAspectRatio setting on the SVG should fix this. Consider checking out this Solution: https://stackoverflow.com/questions/16438416/cross-browser-svg-preserveaspectratio .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

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