LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

CSS Transitions :

From Fixed width to 100% width

I recently tried running this Pen on my IOS7 updated iphone and now both of the events fire, so it looks like this is fixed in mobile Safari 7!!!! This should still apply to IOS6??? I haven't had a chance to test it.

Click on one of the Fixed Width Rectangles to fire the Transitions

Open this pen in Safari and IOS and see that only 1 of the CSS Transitions fires. Then open it up in Chrome or Firefox and see both of the CSS Transitions fire.

The below CSS Transition will not work on Safari and IOS (including Chrome for IOS) browsers because the transition is going from Fixed width to Percentage width.

fixed width 100% width

I found through testing that Chrome and Firefox can transition between fixed (em/px) width and percentage based width, but on Safari and IOS (iphone/ipad - in both Safari IOS and Chrome IOS browsers) the transitions do not work.

The below transition will work on Safari and IOS because it uses 0% width and also has a min-width property for whatever fixed width you need the element to be. Then you can keep your percentage based width on the other class you are using to expand the element and the CSS Transition will still work on Safari and IOS because you are going from 0% width to 100% width, instead of going from a fixed width to 100% width.

Click Here to see the article that helped me
CSS
body {
  margin: 1em;
}

h4 {
  color: red;
}

.fixed {
  padding : 0.5em;
  background-color : #E0E0E0;
}

.search {
  padding: 1em;
  background-color: red;
  width: 0%;
  min-width: 6em;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -ms-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  margin-bottom: 1em;
}

.search-safari-broken {
  padding: 1em;
  background-color: red;
  width: 6em;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -ms-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  margin-bottom: 1em;
}

.open-search {
  cursor: pointer;
  color: white;
  line-height: 2em;
  text-align: center;
}

.close-search {
  display: none;
  cursor: pointer;
  color: white;
  line-height: 2em;
  text-align: center;
}

.open {
  width: 100%;
  -webkit-transition: width 2s ease;
  -moz-transition: width 2s ease;
  -ms-transition: width 2s ease;
  -o-transition: width 2s ease;
  transition: width 2s ease;
  
}

a {
  text-decoration: none;
  color: darkblue;
}

a:hover {
  color: blue;
}
JS
var open = $('.open-search'),
    close = $('.close-search'),
    search = $('.search'),
    searchSaBrokenfari = $('.search-safari-broken');

open.on('click', function() {
    search.toggleClass('open');
    searchSaBrokenfari.toggleClass('open');
    open.toggle();
    close.toggle();
});
  
close.on('click', function() {
    search.toggleClass('open');
    searchSaBrokenfari.toggleClass('open');
    close.toggle();
    open.toggle();
});
Host Instantly Drag and Drop Website Builder

 

Description

In Safari and IOS the CSS Transition will not fire using fixed width to percentage, however the Transitions fire when viewing in Chrome and Firefox.
Term
Mon, 11/27/2017 - 22:07

Related Codes

Pen ID
Pen ID
Pen ID