I'm trying to fade in a div in a webapp I'm building for iPad. The iPad chokes trying to use jQuery's fadeIn() method so I'm trying to do the transition with -webkit-transition: opacity 1s linear and changing the opacity to 0 or 1 with javascript. It looks pretty smooth, except that it flickers once quite jarringly at the end of the fade.
As I learned here a while back, this flicker instantly disappears when I set -webkit-backface-visibility: hidden. Unfortunately, when I have that set, the div no longer detects the click or touchstart events used to dismiss it. I'm very confident this is the problem because when I remove that property in the inspector, it will read clicks perfectly. I found someone else mention a similar bug in a comment on SO but no solution was given.
Does anyone have any ideas how to work around this?
The trick was that the divs I was trying to read the click on were in a collapsed 0x0 div. It's a bit bizarre that backface-visibility would make or break that, but I was able to fix the problem by making the previously collapsed container full size and adding js to turn it display block and none at various times.
Related
I'm stuck I'm trying to display this background animation over all my containers/entire page but ever since i implented scroll snap they don't want to coexist I know the overflow hidden is the problem is their anyway you guys think I bypass this. i want the background animation to display over the entire screen while still having the snap scroll...i tried everything from javascript to switching around postions... I also want the animation to be behind the text if possibly
link:
https://jsfiddle.net/bossmanricky/3q2h0pnb/2/
html
<h1>please help</h1>
There is a flicker where all the elements in my animation show up before the animation starts. I thought this was an animation-fill-mode problem, but I can't make it stop doing this no matter what settings to this property I apply. Then I thought it was a webkit thing. But it's now happening on Firefox too. It only happens on page refresh or when one has not visited the page after several hours. When one clicks on the homepage using the NAV menu, it doesn't do this. I also tried -webkit-transform-style: preserve-3d; and -webkit-backface-visibility: hidden; but these either did nothing or messed up my fancy box 2 lightbox. sorry, it's my first css animation project...I know there is a simple solution to this, but I can't seem to figure out what it is!! Your suggestions are greatly appreciated....
http://theflightfantasticfilm.com
animation css is here
/css/theflightfantastic.css
and
style css is here
/css/style.css
I am wondering why I am seeing a flickering effect on an element when using transition: all 0.5s ease-out; in FireFox (latest as of this writing). It's hard to explain, but see live example here: http://imaginary-material.launchpage.me/ (check out the logo flickering) - this issue does not happen on Safari or Chrome.
update
In my original code I had the transitions applied to the a tag wrapping the img and the img. Removing the translate from the a tag gets rid of the flicker, so that solves my problem. However that is still a mystery to me, if anyone cares to comment on why it would cause flicker, please do so.
Found solution you are using Very big images [1024 resolution] instead of thumbnails!
Use light images for flicker-less transitions!
Try this for images src="http://placekitten.com/120/120" demo it will not flicker! Checked
I am trying to make a dialog box for one of my web app. I have the concept implemented at http://jsbin.com/etuyut/2/edit.
I would like to have the dialog box come in with animation.
I understood that going out (hiding) of the dialog with animation is not possible as the wrapper's display becomes none. I would like to know what is the problem with bringing in (showing) of the dialog.
I use ZeptoJS for front-end.
Whey? Well this is whey...
http://w3schools.invisionzone.com/index.php?showtopic=46498
While fading in, change display to block, THEN increase opacity to 1.0
While fading out, decrease opacity to 0.0, THEN change display to none
Before next fade in, change display to block once again...
Fading is pretty routine job, nothing impossible in it. Let me know if you need help with code after going through the link above. I think this is enough to push you in the right direction for now.
Background:
I am trying to transition smoothly between various presentations of my website using media-queries and CSS3 transitions. So far everything appears to be hunky dory, however, I've hit a snag while transitioning between a presentation that contains a vertical scroll-bar and one that doesn't. I think it's pretty common to change website widths with media-queries, so I was surprised when nothing came up on Stack about this.
The problem
Webkit browsers appear to enter an infinite loop / flicker when the transition results in a change to the presence or absence of the vertical scroll-bar. Here is a demo of the behavior.. to trigger it, just re-size the window slowly around the 700px wide mark in Chrome or Safari PC.
Question / what I've tried
I'm wondering what the workaround here is for Webkit? Firefox has no problem with it. I've tried removing the easing and transitioning faster (not preferred). I realize that I can simply remove the vertical transitions and simply transition the width, however, it is important to my design to transition both height and width.
I think the easiest solution would be to force the scroll bar to always be present. The simplest way to do that is by using this little snippet:
html {
overflow-y: scroll;
}
Here is your example with the above snippet added: http://jsfiddle.net/joshnh/8XW4v/show
I'm not sure if it is a webkit bug, because if you think about it, it is expected behaviour (it's just weird, and Firefox have done a smart thing in making sure it doesn't happen). Basically, when the media query kicks in, the element shrinks, and the parent no longer needs a scroll bar. The problem with this is as soon as the scroll bar disappears, the media query is no longer relevant due to the extra few pixels that are now available. So the object grows again, the parent brings back the scroll bar, kicking in the media query again, and so on...