I have a serious issue with my dropdown settings on iOS Safari. Imagine a website, which has a header on the top. If you click the header, it will slide down, just like any notification center on mobile phones. The way I chose was quite simple. I have a <div class="settings hide"> with this css:
.settings{
position: fixed;
width: 100%;
height: calc(100vh + 60px);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10;
}
.hide{
top: -100vh;
}
Now, this makes it look like so:
Now, the next step was to create it "slide-able" which I've done using jQuery, by adding class called "show".
.show{
top: calc(0vh - 60px);
}
And this actually made it great. It just worked! Suddenly I tried the website on my iPhone, and because of the bottom bar, always showing until you scroll, my hipe was all gone.
Because it look like this:
Getting it so far? My menu did slide correctly, looks great in any browser, but here in Safari, it is hidden right behind the bar, so user actually can't close it.
I tried my best to solve this issue, butnothing really worked as I wanted.
PS: I assume you know that, but it kinda works when you use bottom: 0;, then it "knows" about the bar and stops correctly right above it. But because the setting is calculated with top position, it does not do the animation, which is necessary for my design.
Any help/solution appreciated!
David, unfortunately iOS Safari is full of unpleasant surprises.
One of them is what iOS Safari considers 100vh.
Viewport height in iOS Safari is not equal window inner height as in Chrome or Firefox.
E.g. on iPhone 7plus 100vh == 696px, but window.innerHeight == 628px.
On iPhone 6 100vh == 628px, but window.innerHeight == 559px.
And so on...
So the solution is getting rid of 100vh.
Assuming that body is offset parent of .settings use 100% instead:
.settings {
position: fixed;
width: 100%;
height: calc(100% + 60px);
...
}
.hide {
top: -100%;
}
Also you do not need to use calc in your .show class (since 0vh === 0):
.show {
top: -60px;
}
Related
I have a sidebar transition that works fine in Firefox, but the first time it is used, the animation is "jerky" in Edge. It lags and then comes out really fast in that browser. After the first time of use per-page-load, it behaves smoothly like in Firefox though. I know Edge has issues with translate all but even specifying the transition type (translatex) in the CSS code did nothing for me.
var sidebar = document.getElementById('sidebar');
var burger = document.getElementById('BurgerID');
burger.addEventListener('click', function() {
if (burger.classList.contains('open')) {
burger.classList.remove('open');
sidebar.style.transform = 'translateX(400%)';
} else {
burger.classList.add('open');
sidebar.style.transform = 'translateX(300%)';
sidebar.style.zIndex = 998;
}
});
sidebar {
background: rgba(255,255,255,0.90);
position: fixed;
transform: translateX(400%);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-ms-transition: translatex .5s ease;
top: 0px;
bottom: 0px;
width: 25%;
height: 100%;
}
<div id="BurgerID" class="">
<mark class="mark-1"></mark>
<mark class="mark-2"></mark>
<mark class="mark-3"></mark>
</div>
<div id="sidebar" class="sidebar">
It's hard to tell because your code sample doesn't run, but you could try adding will-change: transform; to your sidebar element.
The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.
Important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
I want to implement the fade and scale effect shown here:
http://tympanus.net/Development/ModalWindowEffects/
but for a page (with width and height of 100% of the browser) not a modal.
How can I do that using jquery or css? I tried copying the code on the page but it works best for modals not for pages that have width and height of 100%.
On the page are elements with minimum width of 1024px.
Updated the jsFiddle to show it containing elements that are at least 1024px.
You'll want to put your entire page into a wrapper element, and then give it the animation class on DOM Ready.
The CSS will be something like:
body,html{
height:100%;
margin:0;
}
.page-wrapper{
height:100%;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
transform:scale(0);
opacity:0;
transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
transform:scale(1);
opacity:1;
}
And the jQuery will be something like this:
$(document).ready(function(){
$('.page-wrapper').addClass('fade-and-scale');
});
This solution has the benefit of:
"Growing" from the centre of the page, and falling back gracefully on older browsers
Falling back gracefully on older browsers
Not animating any fundamental css properties (ie. width or height)
Fiddle: https://jsfiddle.net/gk5c08rc/4/
Did you mean something like this?
https://jsfiddle.net/rn8ho7wL/
Wrap your page in a wrapper, and set a smaller (or whichever style you like to go FROM) into the base styles for that wrapper. Add in a transition-duration property.
#wrapper {
transition: all 2s;
-webkit-transition: all 2s;
width: 10%;
height: 10%;
background: red;
margin: 0 auto;
opacity: 0;
}
Then, define a class where you want the page to go TO. Styled the same way.
#wrapper.open {
width: 100%;
height: 100%;
opacity: 1;
}
And in your javascript file (assuming jQuery is loaded), simply apply the style.
$(function(){
$('#wrapper').addClass('open');
});
Bear in mind that CSS3 transitions are not supported by IE9 and below, and also require some vendor prefixes to be largely compatible. For using the transform, as described in another answer, apply the following:
-webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0);
Edit:
The issue with the min-width can easily be solved by adding overflow: auto to your wrapper element.
https://jsfiddle.net/rn8ho7wL/2/
I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!
I am trying to build a sidebar navigation like the one used in the Wordpress admin dashboard. I like the option to collapse the sidebar but still see the icons. I'm using Zurb Foundation and jQuery. I finally have a solution that I think might work, but it's doing some funny things. The <li>s are all different widths, until I collapse and reopen the menu for the first time. Then they all stay the same size. So here are my questions:
How can I make the lis be the same size on the first load?
How can I make the main content resize and push over when the sidebar opens (instead of getting pushed down, which is what is currently happening)?
I want the sidebar to appear open on the first page load (with icons and titles), but then if the user toggles it closed (to just the icon view), it should stay closed as they navigate the site. How do I do that?
Here's a jsFiddle with my code.
Here you have a tutorial to do this, and works like a charm, you only need to adapt it to Foundation tutorial
In your particular case, since you want to have teh icons always visible, just open components.css and replace
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 0px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
with
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 60px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
I am currently working on an iOS webapp and have run into an odd issue. I use -webkit-overflow-scrolling: touch; to make a scrollable DIV which works great however when I update the DOM in combination with a scrollup effect in CSS the content is no longer viewable when scrolling down. It 'knows' the height of the content as scrolling is unaffected however nothing below the current view is actually viewable and seems to be cut off. Does this make any sense? If so, any ideas as to what might be going on?
Here is the 'scrollup' effect:
#-webkit-keyframes slideup {
from {
-webkit-transform: translateY(100%);
}
to {
-webkit-transform: translateY(0);
}
}.favup {
-webkit-animation-name: slideup;
-webkit-animation-duration: 350ms;
-webkit-animation-timing-function: ease-in-out;
}
This is the CSS for the content DIV which is where everything is being modified at:
#content {
width: 100%;
position: absolute;
z-index: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Lastly this is the trigger that ends up breaking everything basically:
document.getElementById('content').innerHTML = "<div id=\"fav\" class=\"favup\"></div>";
I also update the height after every DOM update to keep the scrolling working properly as talked about here: iOS div momentum scrolling without fixed height (content loaded via ajax)?