So I made a site that heavily relies on CCS3 animations, I would never do this for a client as I know it is risky but as its just a personal project I don't mind.
The animations work fine on modern browsers using Windows 7 and they seem to work on XP when using Firefox, they don't work at all on IE but again it's a small personal project so I do not mind.
Now when using the site on the latest Chrome with XP the animations work but not correctly.
When you click the div, the div flips over displaying information, but on Chrome/XP it just flips the div but just shows the same div, just backwards instead of showing the other div behind it.
Also when using Chrome/XP it shows some of the images backwards when you load the site up, which I assume is the animations not displaying correctly.
You can see the site here: http://www.dansteeds.co.uk/awipmapv2/
Any help or information is greatly appreciated.
Chrome uses gpu hardware acceleration to render 3d css.
type the following url into your chrome browser http://chrome://gpu and check for 3D CSS: Hardware accelerated. If it isn't, it will instead use a kind of quasi-3d isometric projection.
I think the hardware acceleration might be disabled in your browser causing a bug in your animation.
:)
Related
I'm working on an animation using packery. Tiles are aligned in a grid and clicking on one is supposed to enlarge it and dynamically rearrange the tiles accordingly. The resizing is animated using CSS3 transitions. All of this works as expected in IE10 and Firefox, as demonstrated in the following codepen: http://codepen.io/anon/pen/ilkmK
The same code in WebKit-based browsers (tested on Windows) produces a frantic wiggle / shaking of the box as it is resized and repositioned.
I already submitted an issue and the problem seems to be that width and height transitions in WebKit are not optimized. Implementing the same animation using jQuery.animate improved the situation a little bit, but it doesn't get rid of the wiggle. Especially on slower systems it remains very noticable.
For now I'm using the JavaScript version as a slightly better fallbackf or webkit browsers, but it's not optimal. I have no idea where to go from here, so I was hoping Stackoverflow could help me out.
For any hints on how to make this work in Chrome/Safari, I'd be very grateful.
I just tried this in Chrome on mac and it's working fine, so I can't replicate the problem. However I have a feeling this might be to do with the fact that when webkit browsers load a page they initially generate images with 0 dimensions.
Try putting your jQuery in $(window).load(function(){ instead of $(document).ready(function(){
That would wait for images to load before executing the script.
I have a bunch of images I've set up in css to appear as a 3d stack. It shows up correctly in Safari all the time (pc or mac) but only sometimes in Chrome. I haven't put in the Moz stuff so it certainly won't work there, but I'm aware of that and that's not the issue I'm dealing with. It seems Chrome on Mac (consistently) and on newer PCs works fine, but on my windows XP machine it doesn't work, and it's almost definitely an issue with the perspective property.
I've set up a jsfiddle isolating the section of the page: http://jsfiddle.net/4vXXd/
Here it is in chrome for windows xp with the perspective not working:
and in Safari for windows xp working:
Any thoughts on how to get this working?
Chrome will only render 3D css in true perspective 3D if GPU acceleration is enabled. If it isn't, it will instead use a kind of quasi-3d isometric projection.
To see if your chrome has GPU acceleration enabled, type about:GPU into the address bar and see what it says.
We've run into an optimization problem using WebKit on Mac OS X that we're hoping someone can help us with.
We've written a Cocoa app for Mac OS X that essentially manages a single WebView that points to our online web site. Everything is working fine for the most part. However our web site uses CSS's position:fixed to keep a thin "header bar" locked to the top of the WebView, similar to the big orange "Welcome" bar at the top of StackOverflow.com. We've determined that with position:fixed active, scrolling the WebView forces the entire web page to re-draw itself, which causes scrolling to be agonizingly slow. With position:fixed disabled, scrolling is very fast and fluid; only the page elements that are scrolled "into view" need to be drawn.
We know that this isn't a bug in our Cocoa app code, nor is it a problem with our HTML/CSS code. The same slow scrolling occurs using WebKit test code from Apple. We can point Apple's test code to http://www.StackOverflow.com as a test and we see the exact same behavior. There's also a test page in the Mozilla bug database that we've been using to test the problem (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). The odd thing is that some WebKit-based browsers on the Mac (eg, Safari and Chrome) don't have this problem; scrolling is always fast on pages using CSS's position:fixed with those two browsers.
Has anyone else experienced this problem with WebKit on OS X? If so, what can we do to speed up our scrolling? Thanks.
I might be way off here as I'm not sure if the same will apply in your web view, but using a style that forces the nav onto its own layer may help.
Something like translateZ(0), or translate3d(0,0,0,). I've come across similar issues when building with Phonegap and applying some thought to layering really helped out.
I believe the browser can utilise hardware acceleration where a third dimension is involved.
I was having a similar problem: the fixed bar was flickering when I was scrolling the page.
So I forced the WebView to use layers and I fixed
[w setWantsLayer:YES];
I had a similar issue in my webview based mac app. It has header and footer with position:fixed css property. Latest webkit shipped with 10.10.x and above don't suffer from this issue. It happens in webkit for mavericks (10.9.x). I got it working by setting these properties for the webview
[self.webView setWantsLayer:YES];
[self.webView setCanDrawSubviewsIntoLayer:YES];
I have several divs on a webpage that use the IE css filter to create a gradient effect for the background.
The page is viewed primarily in IE6 (I have no other choice unfortunatly) and displays fine on my development machine. I have also tried viewing the page using IETester and the page also displays fine in IE 5.5 to IE 8.
However, when viewing the page on the "live" machine, the gradients don't show up at all. The browser on the "live" machine is IE 6 with sp3. I have checked the div's and they all have "hasLayout" so that isn't the problem.
Are there any settings within IE that would stop filters working or could anybody suggest any other reasons why they would not be showing up. I can't work out why they work in one version of IE 6 but not another.
Unfortunatly I can't link to any examples.
Thanks
The filter features of IE are not built into the browser; they are using external libraries (DLLs). This is what the 'progid' part is all about, and also explains why some of them are so clunky.
If those DLLs are not installed on the client machine, then the filter styles won't work. If it works in some IE6 machines but not others, then this is almost certainly the problem you're encountering.
Theoretically it should be possible for you to fix the problem by installing the missing DLLs.
However, the problem for you is that if the client is anal enough not to have upgraded their browser from IE6 yet, then it's pretty certain that they're not going to want to have you fiddling around on their machines installing unknown (to them) libraries. In any case, you would have to do it for every individual machine.
The bottom line is that realistically this is not going to be an option. Your best bet is to give up trying to make IE6 do fancy stuff, and go back to using background images for your gradients. It's not pleasant to write, but there is a reason why everyone used to do it that way when IE6 was the standard browser.
Recently i have come up with problem with background image like a ipad theme that contain a video, problem is that size of video may change, so i thought of trying border- image properties of CSS3. the major properties of css3 could be made cross browser compatible by using some technique or other. currently i use css PIE. but it doesn't support image border property in its recent version, IS there any way round. Just need to fix it. IE is really a pain :(
I thought of using some "Ninja in your browser" script it didn't worked.
Nope. There's currently no way to get border-image into all versions of Internet Explorer. PIE is working on it for IE9, from what I've found, but ran into some breaking problems (see more info in this duplicate question).
From the sound of it, your best bet is probably to allow IE to gracefully degrade by using a simple border or background.