Announcement

Collapse
No announcement yet.

Important theme bugfix for mobile Safari devices

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Important theme bugfix for mobile Safari devices

    It looks like in the latest iOS update Apple did some changes into Safari, which now prevent some theme dropdown functionality from working correctly. Mainly this is related to sorting drop down selectors:

    Click image for larger version

Name:	default_theme_dropdowns.png
Views:	1
Size:	38.0 KB
ID:	928

    In order to fix this behavior, you should add some styles into your theme CSS file or in template.

    But first go to Website UI -> Theme settings and check your theme version. If it says you have KVS Default theme with any version before 6.4, you should apply this hotfix. Starting from KVS default theme 6.4 this fix is already present and you don't need to do anything.

    Click image for larger version

Name:	default_theme_version.png
Views:	1
Size:	4.6 KB
ID:	929

    IMPORTANT! This fix won't come with any future KVS update, since KVS updates do not affect site theme. You should apply it manually.


    Option 1. Modify CSS files via FTP or filesystem

    You should add the following code:

    Code:
    @supports (-webkit-overflow-scrolling: touch) {
      .sort,
      .content {
        cursor: pointer;
      }  
    }
    at the end of these 2 CSS files under your project:

    Code:
    https://www.kvs-demo.com/styles/all-responsive-white.css
    https://www.kvs-demo.com/styles/all-responsive-metal.css
    If you don't have these files, most likely you have another theme, or your theme was customized to use another CSS files. In this case please check if you have this issue in mobile Safari and contact your theme developers for a fix.


    Option 2. Add style into header template in admin panel

    If you don't know how to use FTP or modify files on server filesystem, you can apply this fix from admin panel by modifying header template.

    Go to Website UI -> Page components -> include_header_general.tpl and add the following code BEFORE the closing </head> tag:

    Code:
    <style>
    @supports (-webkit-overflow-scrolling: touch) {
      .sort,
      .content {
        cursor: pointer;
      }  
    }
    </style>
    Then in Website UI section click on Reset MemCache option in the sidebar (if this option exists).


    Troubleshooting

    If you still see any issue with sorting dropdown in mobile Safari, make sure you refresh the page several times to avoid caching issue. Other than that there should not be any trouble. This fix was applied and verified on KVS demo site (https://kvs-demo.com).
Working...
X