I'm using CSS transitions for the background-image property, though from what I can gather they are only supported by Chrome and Webkit (it doesn't seem to work in Safari 5.1.7). I really don't want to use jQuery for the transition since its only solution is to fade out the element (and with it the content) and fade back with a new background. Normally I would do it the standard way and have multiple divs or images inside a wrapper to rotate between, but the way this site is set up that simply wouldn't work (well technically it could, but it just seems ridiculously and needlessly over-complicated).
Visit the site here and you'll see what I mean: http://bos.rggwebdesigns.com/
Is there some way to safely fall back for other browsers that don't yet support background image transitions, either by disabling it completely or some other method? If the browser can't handle it, I don't want the user to just see the background change abruptly.
You can use Modernizr for feature detection, and then change your CSS on the fly accordingly.
Modernizr
Related
I am working on a audio/video rendering plugin that is using FireBreath and we have a need to get HTML elements to overlay on top of the video. I am aware that to do this I need to use the windowless mode in FireBreath. However since I am using DirectX to render the video I cannot initialize DirectX with the HDC handle (it requires a HWND) that I get when I am instructed to render in windowless mode.
Also for other software security reasons I cannot render the video to an off-screen surface then Blt the bits to the HDC.
The alternative I was trying to accomplish is to use the Hardware Overlay feature in DirectX and use the browser's TOP level HWND to initialize DirectX, then use the HDC and coordinates to tell directX where in the TOP browser window to render the video frame. And render it directly to the top parent browser window.
I have tired a proof of concept, but I am seeing my video frames getting erased quite often after I draw them and thus the video appears to be flickering. I am trying to understand why that might be and I am wondering if this is not a viable solution given my parameters.
Also I am wide open to suggestions on how to accomplish this given my constraints.
Any help would be greatly appreciated!
In the FireBreath-dev group, John Tan wrote:
As what I know, you practically have no control precisely when the screen is going to draw. What can only be done is:
1) Inform the browser to repaint by issuing the windowless invalidatewindow
2) browser draw event arrives with the hdc. Draw on the hdc
John is completely correct. In addition, the HDC could potentially (perhaps likely will) be different each time your draw is called. I don't know of anyone who has successfully gotten directx drawing using windowless mode, and you have absolutely no guarantee that what you are doing will ever work as even if you got it working the browser may change the way or order that it draws in in a way that would break it.
You might want to look at the async surface API; I don't know which browsers this works on but I suspect likely only Firefox and IE. It was implemented in this commit.
I haven't used this at all, so I can't tell you how it works, but it was intended to solve exactly the problem you're describing. Your main issue will be browser support. What documentation there is is here.
Hope this helps
I created a very complex web app using HTML5, CSS3 and jQueryMobile.
It seems like jQueryMobile turns on hardware acceleration here and there via translate3D and/or translateZ.
Now I want to turn this off for certain HTML elements.
This gives me two questions:
Is there a css property/attribute or something that I can use to tell the browser to turn off hardware acceleration for certain elements?
If not: I will have to find the places where either translate3D or translateZ is used and simply remove them, right? How can I do that? The whole markup is very complex with many HTML elements. I can't go through each element in the inspector and search for it.
Update: The reason why I want to fix this
In my web app there are some elements which need to be swipeable (e.g. an image gallery). In this case I need hardware acceleration. Same for div containers that require iScroll and every other element which should be animated (e.g. slide- and fade-animations).
However, there are many parts of the app which are static (not animated). Using a special startup option in Safari, I was able to make the parts which get hardware-accelerated visible. This way I noticed that THE WHOLE app gets hardware-accelerated, not only the necessary parts.
IMHO this is not a good thing because:
Accelerating the whole thing will cause heavy load to the GPU which makes the whole app stutter while scrolling.
AFAIK it's best practice to let the CPU do the static stuff while the GPU only handles all the fancy animated stuff.
When animations have ended, hardware acceleration should be deactived because it's not necessary anymore and would shorten battery lifetime.
After going through thousands of thousands of lines of CSS code, I found this:
.ui-page{-webkit-backface-visibility: hidden !important}
This was active for all pages and caused the problem. Removing that line fixed it for me.
I'm looking for a simple method to implement a 'loading' indicator on img elements for Mobile Safari (and possibly other mobile agents). At first sight, using the background: property on such elements seems the way to go. There are two problems though:
Agents tend to start rendering already when only part of the image is loaded. This looks pretty weird in combination with the loading indicator image.
I'd like to apply a css3 rotation animation (spin) to the loading indicator (and not to the final image).
Setting the content css property to '' and a simple class-tag that indicates the image is loading would work around this. Unfortunately, this also somehow prevents Mobile Safari from doing the animation (although it seems to work fine in Chrome).
Other (and perhaps better) solutions would involve multiple elements, but I am specifically trying to prevent this. Css pseudo classes :before or :after also do not work in combination with animations.
My attempt thusfar: https://gist.github.com/1225523#file_loading.html
Any suggestions?
I would suggest spin.js that is all CSS3 based and it don't use any image. You can customize your spinner very easy.
SPIN.JS
I m working on web app in GWT, and need to implement sth like http://instagr.am/ that cycle the screenshots. any one knows what gwt library can do that? Much thanks.
Looking at the implementation of it in Chrome's developer tools it looks like it should be pretty easy to mimic, without a library.
It looks like has a div with a background image of let's say Img1.png, containing an img tag of Img2.png. Then it slowly changes the img tag's opacity to 0, in effect hiding Img2 in favor of its background, Img1.
When it's done, it then switches the div's background image to be the one in the img tag, and picks Img3.png as the div's new background image. Continue this process forever for the effect.
It shouldn't be hard to implement this effect in GWT with a combination of Animation and Style as I've described.
I have a bunch of texts and images (taken from the content tag of a RSS feed item) that I want to display in my app. I've managed to extract them from the entire content tag with some regular expressions. But the thing is, in order for the texts to appear before all the images are loaded, I need to preload all the images, and even more, I need to reposition all the texts/images when an image is loaded, because I don't know their size at first, to position the element under them correctly.
I realized this is too much hard-work for such a simple task.
I searched for some simple HTML wrapper but I found nothing. And than I realized: hey, I can insert HTML directly into an UIWebView. But then again, I see UIWebView more like an iFrame in HTML, and by that I mean not a very flexible/fluid element. The content will be bigger than the iPhone screen height, can the UIWebView adjust to fit it's contents? I don't want the browser zoom features and all, but rather to blend in the page.
So bottom line: In order to display a bunch of texts combined with images, should I continue with my initial pain-in-the-ass method, should I use a UIWebView, or is there another simple element like the one in my dreams? :)
Thanks.
Definitely use the web view; it has hundreds of person-years of work behind it, and is realistically impossible for you to reproduce by yourself. To keep it from zooming, you can add a viewport meta tag to your HTML fragment.
...[S]hould I continue with my initial pain-in-the-ass method, should I use a UIWebView, or is there another simple element like the one in my dreams...
I'm not entirely sure what you have against UIWebView, it's a decent and fairly complex element that can support many behaviors. One of the extremely attractive properties of IB and Cocoa development is that prototyping is very quick. I think you should spend half an hour and play around with the component. Writing your own code is definitely an option, but layout engines (ie WebKit in UIWebView/Safari, or Gecko in Firefox) is a complicated task. Why reinvent the wheel?
HTH.