In my html5 game I'm playing some css3 keyframe animations.
During the animation the user can press a pause button, which sets the div-container (containing children on which the animations are played) to display:none.
After getting back to gameplay and setting the div to display:block, the keyframeanimations are forced to get replayed in Chrome and Safari.
It works fine in Firefox!
I've created a jsfiddle to show the problem http://jsfiddle.net/rrDsN/ .
in firefox the element continues to rotate, in chrome and safari it gets replayed.
I tried to use visibility:hidden, opacity:0 instead, but then I have problems with clickable elements (due to opacity) and visibility isn't recursive in the div-element.
How can i prevent the animation to get replayed in a webkit browser or what would be an alternative to display?
Solution
It's a combination of zIndex and Opacity:
old code:
if(visible) {
this.domEl.style.display='block';
} else {
this.domEl.style.display='none';
}
new code:
if(visible) {
this.domEl.style.zIndex=(this.prevZIndex==undefined?0:this.prevZIndex);
this.domEl.style.opacity=1;
console.log(this.name+" "+this.domEl.style.zIndex);
} else {
this.prevZIndex=this.domEl.style.zIndex;
this.domEl.style.opacity=0;
this.domEl.style.zIndex=-10;
}
}
Hide by position: absolute with not visible coords (fiddle):
document.getElementById('rotate').onmouseover = function(){
this.style.cssText = 'position: absolute; top: -9999px;left: -9999px;';
};
document.getElementById('rotate').onmouseout = function(){
this.removeAttribute('style');
};
Related
Position sticky doesn't work when virtual keyboard is open in Safari
I've tried using position: -webkit-sticky.
Expected behavior in non-Safari webkit browsers (Chrome, Firefox, Opera)
.sticky {
background-color: red;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
Steps to reproduce:
Open https://codepen.io/wmsmacdonald/pen/vYBVVRL in Safari on iOS
Scroll to bring white screen into viewport
Click text input to focus
Expected:
Red footer should stick to bottom of screen even when virtual keyboard is open
Actual:
User must scroll down with keyboard open in order to see the red footer
let pendingUpdate = false;
const viewportHandler = (event) => {
if (pendingUpdate) {
return;
}
pendingUpdate = true;
requestAnimationFrame(() => {
pendingUpdate = false;
const layoutViewport = document.querySelector('.sticky');
layoutViewport.style.transform = "none";
if (layoutViewport.getBoundingClientRect().top < 0) {
layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
}
});
};
window.visualViewport.addEventListener("scroll", viewportHandler);
window.visualViewport.addEventListener("resize", viewportHandler);
The pendingUpdate flag serves to prevent multiple invocations of the transfrom that can occur when onresize and onscroll fire at the same time. Using requestAnimationFrame() ensures that the transform occurs before the next render.
This is expected behavior in Safari as of October 2019:
https://bugs.webkit.org/show_bug.cgi?id=202120
A workaround to make it consistent with other rendering engines would be to use the Visual Viewport API to get the visual viewport height and fix the element to the bottom using position: absolute. However, the Visual Viewport API only has support in Safari 13.
I know how to to slide up and down a content box with css3 transitions and a specific height property and overflow set to 'hidden'.
But in my case I need this box to be overflow visible at the end of the slide-down-transition (it contains some absolute positioned elements that are larger than the box - to be specific a slide out menu).
Is there a way to delay the setting of the overflow-property?
I tried something like transition: overflow 0s ease 0.5s; but that obviously doesn't work.
best,
d.
The syntax you're using is absolutely right: transition:property | time | easing | delay, another property
Unfortunately, overflow isn't animatable at all (See W3C). So it's not possible to use transitions on it.
I think the only solution would be using JavaScript and the transitionend-event:
JavaScript
["transitionend","webkitTransitionEnd","mozTransitionEnd"].forEach(function(transitionEnd) {
document.querySelector("div").addEventListener(transitionEnd,function() {
if(this.style.overflow == "visible") {
this.style.overflow = "";
} else {
this.style.overflow = "visible";
}
});
});
jQuery
$("div").on("transitionend webkitTransitionEnd mozTransitionEnd",function() {
$elem = $(this);
if($elem.css("overflow") == "visible") {
$elem.css("overflow","");
} else {
$elem.css("overflow","visible");
}
});
Demo
Please check the following fiddle: http://jsfiddle.net/tWUVe/
When you click the div, the p's get deleted, and I expect that the div's height will be animted, but no animation happens. How can I achieve an animation with CSS3 only?
The issue is that there is no opportunity for the transition to occur. What I mean by this is that when elements are removed, they are immediately taken out of the document flow, resizing the parent if needed without a transition.
As a fix for this, you could animate the height of the paragraphs instead (or a similar means)
$('div').click(function() {
var $thisDiv = $(this);
$thisDiv.find('p').css({'height':'0px','margin':'0px'}); // Change p height
// Remove after transition
setTimeout(function() { $thisDiv.find('p').remove(); }, 1000);
});
Demo
OK, so my problem is that I have a parallax website for a client and they would like a product description to fade-in when they scroll-down the parallax site. The problem I think I have is because the site is effectively one long page, the scripting is getting confused and fading the div in from "opacity:0" when the page is loaded. I have put a long fade-in on the div to understand what is happening and I have also made a rubbish box without proper formatting to test it. I have uploaded a temporary copy of the site (i'm working offline) to show what is happening.
http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!images
Thank you for your help everyone!!! :-)
CSS
/* Hide any element */
.hideme {
Opacity:0;
}
HTML
<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>
SCRIPT
<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>
To check the bottom of the window, instead of using .scrollTop, try window.pageYOffset.
Plus I think you're making the JS work too hard - I would try to calculate the bottom_of_object outside the .scroll() function so that it's not calculating the position every time the user is scrolling.
And for simple fade in/out, I would just do a display:none, .fadeIn().
I'm having some issues with scrollbars on element with position: absolute. The behavior I'm experiencing is that chrome 21 and firefox 15 displays scrollbars inside the box, resizing it's content thus hiding some of the text, however opera 12 and internet explorer 9 displays it also on the inside, but without resizing it's content and resizing the box instead (which is in my opinion correct, since the box doesn't have width defined). Is there any solution to make this look the same in those 4 browsers?
JsFiddle: http://jsfiddle.net/Kukkimonsuta/GaMD7/2/
Edit: as Siva Charan pointed out, it works correctly when overflow-y is set to "scroll" however that shows scrollbar always which is not desired
Edit: my final solution based on answers from Siva Charan and anonymous down voting is lame
http://jsfiddle.net/Kukkimonsuta/GaMD7/15/
function updateAutoScroll(element) {
var $element = $(element);
if (element.scrollHeight > element.clientHeight)
$element.css("overflow-y", "scroll");
else
$element.css("overflow-y", "auto");
}
The only way to do this dynamically across all browsers is with JavaScript, for simplicity I used jQuery.
http://jsfiddle.net/iambriansreed/mYuQx/
$(function(){
// loops through each container
$('.container').each(function(){
if(this.scrollHeight>this.clientHeight)
$(this).children().wrapAll(
'<div style="padding-right:'+scrollbarWidth()+'px;"/>'
);
});
// gets the browsers current scrollbar width
function scrollbarWidth() {
var parent, child, width;
if(width===undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() -
child.height(99).innerWidth();
parent.remove();
}
return width;
};
});
Add overflow-y: scroll; to .container.two
.container.two {
top: 250px;
overflow-y: scroll;
}
Refer LIVE DEMO
UPDATE:
If you are comfortable, you can use text-overflow: ellipsis; and replace to actual space
This is more of a workaround than an actual solution, but it might be good enough. Basically, first wrap the contents of container two in another div, and add some right padding to it. Make sure you also set width: 100% in .item.
Here's a modified version of your demo: little link.
This isn't perfect, but I hope it helped!