Menu icon Foundation
Iphone 4 IOS 7.1.2 and android browser 4.5.472295 off-canvas support For 6.2.1

Hi,

I have been trying to get my tests mobile phones to work with Foundation version 6.2.1 off-canvas feature.

Even if we clearly understand that only last two version of safari and android browser >2.3 are supported , Iphone 4 are pretty much still present in our customer base, as well as various version of internet browser on android 4.xxxx smartphone.

We found that the Iphone does not work with off-canvas (other features works fine).

We then tested with the preinstalled android browser on two android phones, a htc OneX+ (android 4.1.1 / internet browser 4.5.472295) and a wikio cink slim2 (android 4.2.2-9 / internet browser 4.2.2-9). Surprisingly the wiko worked fine, but not way to get the off-canvas menu on the HTC.

 

Is there any way to support them ? 

Example code given on the docs are not supported when cooked in a page,surprisingly the doc page on off canvas does work properly, which means that either our friends from Zurb are not making the doc pages with the latest version of Foundation, or they use different JS routines. :-)

 

We have a temporary page set up at AmaZili's test page for off-canvas.

 

Can someone help ?

Thanks 

 

Philippe Delberghe

Création sites web AmaZili

 

Iphone4androidoff-canvasfoundation6

Hi,

I have been trying to get my tests mobile phones to work with Foundation version 6.2.1 off-canvas feature.

Even if we clearly understand that only last two version of safari and android browser >2.3 are supported , Iphone 4 are pretty much still present in our customer base, as well as various version of internet browser on android 4.xxxx smartphone.

We found that the Iphone does not work with off-canvas (other features works fine).

We then tested with the preinstalled android browser on two android phones, a htc OneX+ (android 4.1.1 / internet browser 4.5.472295) and a wikio cink slim2 (android 4.2.2-9 / internet browser 4.2.2-9). Surprisingly the wiko worked fine, but not way to get the off-canvas menu on the HTC.

 

Is there any way to support them ? 

Example code given on the docs are not supported when cooked in a page,surprisingly the doc page on off canvas does work properly, which means that either our friends from Zurb are not making the doc pages with the latest version of Foundation, or they use different JS routines. :-)

 

We have a temporary page set up at AmaZili's test page for off-canvas.

 

Can someone help ?

Thanks 

 

Philippe Delberghe

Création sites web AmaZili

 

Sven CAILTEUX over 3 years ago

 

Probably that you didn't copy it correctly, it works fine... but not with your example.
Tu as du mal copier, perso ca marche très bien... mais pas avec ta page.

 

Try this code :
Essaye ce bout de code :

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
               
      <!-- off-canvas title bar for 'small' screen -->
      <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
        <div class="title-bar-left sandwich">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Menu</span>
        </div>
              <!-- -->
              <div class="title-bar-right">
                <span class="title-bar-title">Login</span>
                <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
              </div>
            
          </div>
      
          <!-- off-canvas left menu -->
          <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
            <ul class="vertical dropdown menu" data-dropdown-menu>
              <li><a href="/">Accueil</a></li>
              <li><a href="#">Tarifs</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
      
            <!-- off-canvas right menu -->
            <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
              <ul class="vertical dropdown menu" data-dropdown-menu>
                <li><a href="right_item_1">Right item 1</a></li>
                <li><a href="right_item_2">Right item 2</a></li>
                <li><a href="right_item_3">Right item 3</a></li>
              </ul>
            </div>
          
          <!-- "wider" top-bar menu for 'medium' and up -->
          <div id="widemenu" class="top-bar">
            <div class="top-bar-left">
              <ul class="dropdown menu" data-dropdown-menu>
                <li>
                  <a href="/">Accueil</a>
                </li>
                <li>
                  <a href="#">Services</a>
                </li>
                <li><a href="#">Tarifs</a></li>
                <li>
                  <a href="#">Contact</a>
                  </li>
                </ul>
              </div>
      
            </div>
      <div class="off-canvas-content" data-off-canvas-content>
        <div class="row large-8 column text-center">
&nbsp;
        </div>
      </div>
    </div>
  </div>

Philippe Delberghe / AmaZili over 3 years ago

Hi, I copied your code to the page, here is the page code :

<!doctype html>
<html class="" lang="fr" itemscope itemtype="http://schema.org/LocalBusiness">
<head prefix="og: http://ogp.me/ns#; dcterms: http://purl.org/dc/terms/#">
        <meta charset="utf-8" />
    <base href="http://lesancheslibres.com/" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
  <title>Communication écrite et internet services aux entreprises</title>
  <link href="assets/test/css/app.css" rel="stylesheet">
  
  </head>
<body><div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
               
      <!-- off-canvas title bar for 'small' screen -->
      <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
        <div class="title-bar-left sandwich">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Menu</span>
        </div>
              <!-- -->
              <div class="title-bar-right">
                <span class="title-bar-title">Login</span>
                <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
              </div>
            
          </div>
      
          <!-- off-canvas left menu -->
          <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
            <ul class="vertical dropdown menu" data-dropdown-menu>
              <li><a href="/">Accueil</a></li>
              <li><a href="#">Tarifs</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
      
            <!-- off-canvas right menu -->
            <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
              <ul class="vertical dropdown menu" data-dropdown-menu>
                <li><a href="right_item_1">Right item 1</a></li>
                <li><a href="right_item_2">Right item 2</a></li>
                <li><a href="right_item_3">Right item 3</a></li>
              </ul>
            </div>
          
          <!-- "wider" top-bar menu for 'medium' and up -->
          <div id="widemenu" class="top-bar">
            <div class="top-bar-left">
              <ul class="dropdown menu" data-dropdown-menu>
                <li>
                  <a href="/">Accueil</a>
                </li>
                <li>
                  <a href="#">Services</a>
                </li>
                <li><a href="#">Tarifs</a></li>
                <li>
                  <a href="#">Contact</a>
                  </li>
                </ul>
              </div>
      
            </div>
      <div class="off-canvas-content" data-off-canvas-content>
        <div class="row large-8 column text-center">
&nbsp;
        </div>
      </div>
    </div>
  </div>


</body>
<script src="assets/test/js/jquery.js"></script>  
<script src="assets/test/js/what-input.js"></script>  
<script src="assets/test/js/foundation.js"></script>  
<script src="assets/test/js/app.js"></script> 
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-6394281-16', 'auto');
  ga('send', 'pageview');

</script>
</html>

As you can see, there is nothing more than your code in this one, and it does not slide menu on iphone4 and htc internet browser, even if it works well on other environment.

Thanks for your answer, I will continue to seek for a solution.

 

Merci :-)

 

Philippe

Philippe Delberghe / AmaZili over 3 years ago

I did a trial with loading the non sass version of foundation 6.2.3, and it does work with the css and js files from the zipfile.

I will investigate changing one thing at a time and let people know when I get a solution.

Philippe Delberghe / AmaZili over 3 years ago

Continuation :

I did a clean project install with :

git clone https://github.com/zurb/foundation-sites-template projectname

cd projectname
npm install
bower install

npm start



then copied the jquery.js foundation.js what-input.js from bower_components respective directories to the server location.

then copied the generated app.css to the server location.

that page menu slide failed on iphone4!

then copied the empty app.css and foundation.css from the downloaded foundation-6.2.3-complete.zip zipfile over the existing to the server location.

Suddenly, it works !

So now, can someone tell me what is the difference between the foundation.css + empty app.css from the zipfile and the app.css generated with absolutly no modification from the sass installation ?

Help ! Please ....

Philippe

Rafi Benkual over 3 years ago

 The empty app.css file is a place for you to add custom styles. The Foundation.css file is all the Foundation styles that come with your project.

 

The Sass version will compile all the SCSS files into a single app.css file in the dist folder. This is the file you'll upload to deploy your site.

Philippe Delberghe / AmaZili over 3 years ago

Thanks everybody for your help.

I finallly found the solution by comparing the generated and out of zip css files.

 

The problem is that the generated file does not contain -webkit prefixes for css syntax.

 

In order to mimic the css from zipfile, I had to do the following in the configuration files :

Edit config.yml file

change :

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"

# UnCSS will use these settings

 

with :

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"
  - "iOS 7"

# UnCSS will use these settings

 

the generated CSS now contains -webkit prefix and work properly for all old webkit browsers.

 

Hope this help other foundation fans :-)

 

Philippe

Agence de Communication AmaZili

Sven CAILTEUX over 3 years ago

This is strange cause I've just realized a website with the same code and it works like a charm on ios 8 and iPhone 4s...

Philippe Delberghe / AmaZili over 3 years ago

Sven,

IOS 8 and Iphone 4S does work perfectly with out of the box SASS version because they do not neeed the legacy -webkit support that is needed with the Iphone 4 running only iOS 7.

 

That is the reason.

 

Brock almost 3 years ago

Hi,

I'm having the same issue.

Can you provide examples of where the webkit support is required? My thinking is that if it's a small amount of code, perhaps I can add this manually?

Philippe Delberghe / AmaZili almost 3 years ago

@brock,

 

This does not work on IOS7 when you use out of the box Foundation installation from Github installation