I have created a LightBox effect in which Im cycling through a slideshow using a fade transition. The image files themselves are all the same pixel size (1200 x 800 pixels) and I have arranged it so that the slideshow dynamically resizes to the largest size that will show the complete image in the users browser window, a size which of course depends both on the size of the users screen and on the size which the user has set his browser window to, up to a maximum slideshow size of 1200 x 800. This seems to be working fine so far in IE9 and in FireFox, and also at some sizes in Chrome, but at other sizes in Chrome (for example when running in a maximized browser on a 1360 x 768 display where the slideshow size adjusts itself to about 1005 x 670) the fade is quite jerky. (I can already hear some remarks being here, but thats just the way I want it).
I do realise that I am asking the browser to both resize the image and fade it, which will slow it down a bit, but I think that the jerky fade in Chrome is more to do with the fact that Chrome does not normally used graphics hardware acceleration than with what I am doing. In fact I can confirm this by making my page set Chrome to use hardware acceleration, which causes the fades to become very smooth, including the fades which were previously quite jerky. The only problem is that I am using a bit of a kludge to set hardware acceleration in Chrome, something which I just happened to try while I was doing some testing, and I wonder if there is a better way of going about it.
What I am doing is placing a small Google Map on the page and setting it to somewhere in the middle of the ocean so it does not download too much data and hiding it behind an existing object. The Google Map forces Chrome to use hardware acceleration. It works fine, increasing even the worst condition jerky frame rate from something like 5 frames per second to about 25 frames per second on my own machine. However, Im not really happy using this kludge and Im wondering if there is a more acceptable way of having my page force Chrome to use hardware acceleration.
I know that some well known sliders do not perform this trick (The Nivo slider and the standard WebPlus slider for example) and other sliders can do it (FlexSlider2 for example and many others). The thing is, I am not actually using any such sliders and am creating my own slider in straight Javascript code, and I would like to know how to have my page turn on hardware acceleration in Google using standard code rather than the Google Map hack I am currently using. I at first thought that content="chrome=1" in a Meta tag might do it, but of course thats for something quite different. Can anyone offer any help with this?
Mike
I do realise that I am asking the browser to both resize the image and fade it, which will slow it down a bit, but I think that the jerky fade in Chrome is more to do with the fact that Chrome does not normally used graphics hardware acceleration than with what I am doing. In fact I can confirm this by making my page set Chrome to use hardware acceleration, which causes the fades to become very smooth, including the fades which were previously quite jerky. The only problem is that I am using a bit of a kludge to set hardware acceleration in Chrome, something which I just happened to try while I was doing some testing, and I wonder if there is a better way of going about it.
What I am doing is placing a small Google Map on the page and setting it to somewhere in the middle of the ocean so it does not download too much data and hiding it behind an existing object. The Google Map forces Chrome to use hardware acceleration. It works fine, increasing even the worst condition jerky frame rate from something like 5 frames per second to about 25 frames per second on my own machine. However, Im not really happy using this kludge and Im wondering if there is a more acceptable way of having my page force Chrome to use hardware acceleration.
I know that some well known sliders do not perform this trick (The Nivo slider and the standard WebPlus slider for example) and other sliders can do it (FlexSlider2 for example and many others). The thing is, I am not actually using any such sliders and am creating my own slider in straight Javascript code, and I would like to know how to have my page turn on hardware acceleration in Google using standard code rather than the Google Map hack I am currently using. I at first thought that content="chrome=1" in a Meta tag might do it, but of course thats for something quite different. Can anyone offer any help with this?
Mike