Accordion closes prematurely on mobile devices

13 replies · opened Jul 27, 2023

Oout_of_controlJul 27, 2023

We have a dev site (https://delta.dev.outofcontrol.ca/) and on any of the product pages ie (https://delta.dev.outofcontrol.ca/products/motion-controllers/rmc200), the pages worked perfectly on desktop. On Mobile devices when you scroll down to an accordion, and open a panel, then scroll down to read, the panel prematurely closes and leaves the icon as a (-) instead of going back to (+). The issue makes it impossible to read the tab content on mobile devices.

How might we fix this issue?

Oout_of_controlJul 27, 2023

Two screen shots showing web developers tools of an iOS device running Safari. One images shows the the accordion open and the other shows what happens when you scroll down the page a bit. Hope this helps.

Oout_of_controlJul 28, 2023

Additionally, using the original files from you with no modifications, the bug is there also:

https://outofcontrol.ca/sandbox/canvas/tabs.html

I wanted to show this to ensure you that our own JS wasn't the cause.

SSemicolon WebSTAFFJul 29, 2023

Hello,

Thanks for your Patience!

We have checked out your Website and the Codes, and unfortunately, the issue is due to the use of very old version of Canvas (v6.0) which is 3 years old. We have already fixed these issues in the newer versions and you should consider updating the codes to at least v6.1 to fix this Tabs issue. You will likely need to update the js/functions.js and js/plugins.tabs.js File to see the changes. You can download the Latest Canvas v6.x Package here: https://docs.semicolonweb.com/docs/changelog/version-6-6-5/ .

Hope this Helps!

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

Oout_of_controlJul 29, 2023

I was worried about. Will updating the two js files require us to make modifications to the templates or html?

SSemicolon WebSTAFFJul 29, 2023

Hello,

Just updating those 2 JS Files should not cause further issues and HTML changes should not be required but we recommend keeping a backup of those 2 files so that you can rollback to the old files if you face any issues with the new files. If the Canvas v6.6.5 Files does not work for you, let us know and we will provide you with the Canvas v6.1 Package.

However, we would highly recommend to update Canvas to Latest Versions to avoid unnecessary issues as with Browser Updates, some features become deprecated and we also provide so many performance improvements with new updates.

Hope this Helps!

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

Oout_of_controlAug 7, 2023

Unfortunately upgrading the JS, breaks most of the rest of the site and the client isn't willing to dish out for an overhaul at this time.

We will try to find someone who knows JS and hire them to fix this one issue.

Thanks.

Oout_of_controlAug 7, 2023

Actually, can you give us access to download 6.1?

Oout_of_controlAug 7, 2023

All good now. I figured out how to hack the form to download the version I wanted. And we are using v6.6.5 in the end, and everything works now, except...

Changed the follow, but, the height remains the same:

data-sticky-logo-height="16"
data-sticky-menu-padding="19"
data-logo-height="16"
data-menu-padding="19"

Searched a lot but can't figure this one out. Once I resolve this, everything is good to go and the client is thrilled. :)

SSemicolon WebSTAFFAug 7, 2023

Hello,

We can fix the JS Codes for you and upgrade it to the working version safely as a Customization Support if you would be interested.

Additionally, you can consider using the CSS Codes for modifying the Header Heights: https://html-v6-docs.semicolonweb.com/docs/header/header-heights/#docs-steps-custom-css .

Hope this Helps!

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

Oout_of_controlAug 8, 2023

One bug left. The accordion style tabs (responsive) on narrow Firefox browsers on desktop, don't work. Clicking doesn't do anything. Other browsers are working as expected. No errors in console. Any chance for a fix to this possible bug in Firefox?

SSemicolon WebSTAFFAug 9, 2023

Hello,

We have just checked out your Live URL on Firefox and it appears to be working perfectly fine for us. We have attached a Video in this reply. Please make sure that no Add-ons are interfering with your Website's functionalities.

Hope this Helps!

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

Oout_of_controlAug 9, 2023

Thank you. Yes, we managed to fix late last night, and I forgot to follow up. Thank you. This ticket can be closed.

SSemicolon WebSTAFFAug 9, 2023

Glad the issue was resolved.

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