I've got an element #content and a child element #footer positioned outside #content. When animating #content, #footer is not visible during the animation. I've understood from another question that this was because the animation set overflow to hidden during the animation. I've then set the overflow of the wrapper created by jQuery UI (.ui-effects-wrapper) to overflow: visible !important;, but then the animated element is also visible outside #content during the animation.
So: I need overflow: visible to see my #footer element, but jQuery UI needs overflow: hidden to hide the animated part outside #content.
Anybody can help?
Thanks
#content {
position: absolute;
width: 45em;
height: 26em;
top: 8em;
left: 16em;
}
#footer {
position: absolute;
width: 200em; //larger than #content, so have to play with overflow
height: 2.375em;
bottom: 0;
left: -50em;
}
.ui-effects-wrapper {
overflow: visible !important ;
}
During the animation you can change the visibility. Example:
$('#link').click(function(){
// Do the animation
$(this).css('overflow','visible');
});
Would that help?
Related
I have a mobile menu with position:fixed and min-height of calc(100vh - 48px). Top is set to 48px. In the mobile menu I have a wrapper set to height:100% and overflow:auto. I tried setting it to min-height: 100% but it doesn't work. When the content gets taller, the content inside is hidden and there is no scroll. I have set overflow to auto and then tried scroll on the mobile menu but nothing works. What may cause the problem?
.mobile-nav__menu {
width: 100vw;
min-height: calc(100vh - 48px);
position: fixed;
top: 48px;
bottom: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: 21;
overflow: auto;
}
.mobile-nav__menu-wrapper {
min-height: 100%;
width: 100%;
background-color: #fff;
overflow-y: auto;
}
Try to set the height property on window resize javascript event something like that;
var onresize = function() {
height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);
Try using percentage instead of absolute px values.
For example,if u want a header of height 10px on a screen that is 1000px tall, type in "1%" instead of "10px".
This will help the header to adapt to different screen sizes.
Also try adding background-size:cover OR background-size:100% in the css class.
I have a html page containing a div that is moving in when clicking on a button by using css transition on the bottom attribute. (change of bottom value is done by jQuery) This is working fine in all browsers (including iOS on iPad). Now I am developing a second page that has to do the same thing. I copied all css properties and the jQuery function but there is always a choppy animation on iOS (only on iOS!!) when the div moves in.
I already tried solutions like:
-webkit-transform: translate3d(0, 0, 0);
or
-webkit-transform: translateZ(0);
Nothing makes the animation be smooth like in the other page where I (as I think) completely have the same code.
Now I have no idea why there is a difference and how I can solve this. Did anyone already have some similar trouble and can give me some helpful advices for that?
Full code CSS:
.animationTestObject {
width: 100px;
height: 100px;
background-color: black;
position: fixed;
left: 100px;
bottom: -100px;
transition: bottom 500ms;
-webkit-transition: bottom 500ms;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
JS:
function startAnimation() {
$(".animationTestObject").css('bottom', '100px');
}
To get a better performance while animating, try to avoid the css properties that trigger a relayout (those marked with a purple tag).
In your case, you should animate the transform: translate property like so:
.animationTestObject {
width: 100px;
height: 100px;
position: fixed;
left: 100px;
bottom: -100px;
transition: transform 500ms ease;
transform: translate3d(0, 0, 0);
}
function startAnimation() {
$('.animationTestObject').css('transform', 'translate(0, -100px)');
}
I have really bad situation. I have my custom div which I m showing under page. The only issue I have at moment that it's not working on iPad. The overlay covers the popup even after I have proper z-index to both element.
This issue only facing with iPad safari. On other browser it's working fine. I found one solution where I need to shift my popup next to or near by overlay div which is not possible for me due to binding context of knockout.js
The issue snap
here as you can see the attached image the opened calender is behind the overlay gray div.
Below is the html structure where the higlited is the calender container & at last overlay div.
Let me know if some can suggest me some good idea to deal with this.
It seems like if your fixed element is inside an other fixed element that has lower z-index than overlay it will stay behind it even if the element itself has a higher z-index. So you have to find that higher fixed element and change it's z-index to something higher.
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 4;
}
.lower {
position: fixed;
z-index: 2
}
.popup {
position: fixed;
border: 1px solid black;
background: white;
height: 200px;
width: 200px;
z-index: 100;
}
<div class="lower">
<div class="popup"></div>
</div>
<div class="overlay"></div>
It's also happen for me in Safari, simply I solve it by remove overflow:hidden from parent div.
I have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have
.noscroll { // add to body when the lightwindow shows to prevent body scrolling
overflow: hidden !important;
}
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.
Thanks
You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here
To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hope this helps.
I've implemented a simple left-pull burger menu in a mobile webpage that lives inside an iframe. However, it's behaving strangely on iPhones. We are using Bootstrap for the general page layout and stuff.
Using WeInRe I've noticed the following behaviour: in an iframe with 320px in fixed width, if I add, say, left: 50px to the body of the page inside it, this body moves 50px to the left just fine, but also starts to display 370px in width, instead of 320px as before.
The problem is worse: as the correct left value is a percentage, the body gets that bigger width, and after that the left is recalculated, making the menu larger than the viewport.
What the hell is happening here? Is this some sort of known bug of Mobile Safari?
Unfortunately, there's no public available code for this issue yet...
This is the relevant code:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>
Here's a sample, based on a series of side menus from a tutorial (click the left or right push options).