I am using animations from the animate.css library.
Everything looks good until I check the site on my iPhone. It works fine when I use the chrome developer tool device toolbar iPhone setting.
The background while the animation is going on gets distorted, it seems like it is zooming in really far.
I am using the fadeInDown and bounceInUp animations which I read might increase the document height?
Any suggestions or help is greatly appreciated!!
You can set Overflow: hidden to Parent container. So that it will not increase the height when animating.
Tested and verified ;)
Thanks
Related
I have recently started playing around with joyride. It is superb. However, I am having some major responsive issues. When I resize my browser, the tip position changes. For instance, when the original position is 'top' it suddenly changes to 'bottom' when I resize the browser.
I have looked everywhere for a solution but unable to find why this is happening.
Is anyone experiencing this issue and/or know a way around this?
Thanks in advance!
Responsive web design is not about manually resizing your browser, the foundation needs to load to calculte the co-ords of the page?
This template I have made using CSS3 3D transforms is flickering like crazy in FireFox 15 (and possibly older versions? It did seem to be fine a few months ago before an update). I've managed to stop the flickering by removing the container's perspective property, but that's not ideal. If I delete all the child element with Firebug, the problem persists.
Any ideas? It works as expected in all other browsers! I realise this technology is new and unstable, but the flickering is pretty awful in Firefox and absolutely fine in Chrome and Safari.
http://iamalexkempton.net/themes/vFlip_v1-1-preview/template/index1.php
Thanks in advance. :)
Translate3d is buggy (if that's what you're using). RotateY should work fine. It at least solved my flickering and weird rotation.
See: https://bugzilla.mozilla.org/show_bug.cgi?id=769892
Offtopic: Nice site! Works fine here in FF.
use perspective: 1000px; on the containder of a element with the transform should work
Regards
I'm building a web app to design and animate simple 3d scenes using the Away3D library, but the design of the interface itself is built around a scrolling menu which takes up the whole height of the screen.
The problem is, on OSX browsers have a silly quirk where if the page is scrolled when it has already gone as far as it can, the page can be dragged slightly further, revealing a brushed metal background. This looks nice and whatnot, but it pretty much ruins scrolling in a swf object. I use flash builder and export to safari, which is just about useable, if pretty annoying (especially with a mac touchpad, which can give a much higher scroll delta than a mousewheel can), but when I open my app in firefox/chrome the same effect happens, and causes the app and browser to slow down drastically.
I've found code which uses ExternalInterface to stop the swf sending mouse events to the page, but they all seem to disable detection in the swf as well, and I can't find anything else which help. If anyone knows of a solution you'll be saving me from throwing a few months' work away for what seems like a suspiciously unnecessary drawback to Flash on OSX!
Thanks in advance if anyone can help
Figured it out, in case anyone else gets stuck with this:
The feature's called elastic scrolling, if you're running a flash/flex app which takes up all the browser space you can simply set body{overflow: hidden;} in page CSS and it'll work just fine. Obviously, this disables any kind of page-scrolling - I believe you can turn it back on inside nested elements though.
Hope this helps someone anyway!
I'm trying to use the excanvas/JQuery based "Flot" plugin but would like to use a background image. At the moment however there is a bug that means it's not possible to set a background image to the canvas using CSS - the bug is described here and here.
Has anyone managed to get around this bug? It's incredibly frustrating as using CSS to provide a background image to a canvas appears to be valid in every other browser; but not using IE and excanvas!
Any help would be appreciated! I've tried nested divs and more - and I'm running out of ideas!
Thanks in advance
Edit:
There's a possible workaround here - http://code.google.com/p/flot/issues/detail?id=129 - but it seems a bit outdated as a lot of the flot code isn't the same anymore. I guess it does give me something to start with however! If anybody has an easier solution I'd be happy to hear it!
I'm developing a web app for iOS devices, and want to have a header that stays on the top, and then two scrollable content areas underneath it, kind of like Gmail's iPad interface and the iPad split-view apps. Does anyone know how? I've looked at http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/, which has a good solution to the fixed positioning, but only allows one scrollable content area. Does anyone know how to do this? Thanks in advance!
Never mind, just found Sencha Touch, which lets me do this and much, much more!
Use div scrolling. See Glovebox for example. Try this demo on the iPad.