I am trying to create an animation-heavy presentation using impress.js. On chrome, its coming out awesome and really smooth. But, when I run it on firefox, the presentation looks really really bad.
Problems -
Elements which are at the back of the front elements (creating a 3D View) can always be seen merging into the front elements. ( some kind of transparency issues )
Transition from one slide to another is sluggish. Even their own demo is not as smooth on Firefox as it is on Chrome. ( Their DEMO )
I have put about 30 steps in my presentation, and a lot of times, firefox just crashes completely.
If anyone faced with similar problems with firefox and impress.js and found solutions, please help!
Related
I've been using the Phaser.io 2 game engine which runs on Pixi.js as it's primary renderer. However, I've seen some stuttering in the rendering methods directly that I can't seem to pin down. On Chrome, I've managed to smooth things out but not precisely, while on Firefox things run very smoothly, and apparently in other browser and mini-browsers as well.
Today, I recorded a gif of the effect with the main Pixi.js site open in both:
https://i.gyazo.com/23ede3852844317c3abda424a06b9adc.mp4
I have asked others to look at the rendering on Chrome and they have also seen this stuttering, however in the gif, with Chrome on the left and Firefox on the right, it's very obvious something is not correct.
Is there any possible cause that should be looked at, or known issues?
Try enabling hardware acceleration in Chrome settings->search 'hardware acceleration'
My users and I are running into a rendering glitch in Chrome only (on both Windows and Mac) where an overlaid div that I'm using for on-hover tooltip-style "popouts"(see first image below) does not get rendered properly in certain cases (see second image below). In all other browsers I've tested, it works as expected.
Here's how the hover popouts are supposed to look (and what happens in Firefox, Safari, IE):
Here's what happens in Chrome:
You can see it in action on this site if you look at May 24 using a browser window width of ~ 1200px (significnatly wider or narrower windows do not seem to work). The glitch only affects the popouts in the bottom right of the menu that are popping left, e.g. those on May 24. Hovers using the same exact mechanism higher up in the page work just fine. Glitched popouts are invisible (except for part of the carat), but if you click on the link to lock the popout in place and then hold left click while moving your mouse around as if to "select text" in the area where the popout should be, it will then render partially. Also if I open dev tools and try to select the popout, it will render just fine at that point.
I've been looking at this all day and trying different work arounds with opacity, z-index, etc. and getting nowhere. Does this glitch ring any bells for anyone? Is there a way to force Chrome to render the div, once its been positioned and unhidden? I'm fine with any work-around or hack.
I use a custom (and fairly complicated) jquery plugin for popouts. If it would be helpful to see the non-minified javascript for the plugin, I can post or provide a link to that, but general guidance that leads me to a work around will be sufficient to be accepted as an answer.
Edit: My Browser Build: 26.0.1410.65
(Per my comments)
This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.
In support of my "it's a bug" assertion:
The hidden/clipped elements become visible when they are selected.
The elements underneath the hidden/clipped elements are not clickable.
This indicates that z-index and height is correct.
It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
Applying a 3D transform fixes it.
The problem goes away when I apply a CSS transform such as scale3d or translate3d. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.
In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.
Super hacky but this fixes it for me:
$('.drop-link.food').on('hover',function() {
$('.tool-tip').css('overflow', 'hidden').height();
$('.tool-tip').css('overflow', 'auto');
});
Obviously this isn't a "good" solution, and even remaining hacky you could probably optimize it to only force the redraw on the tooltip it needs to, but hopefully it helps...
Another clue:
$('.drop-link').on('hover',function() {
$(this).siblings('.tool-tip').css('display','block');
});
This won't fix it right away, but it seems like if this is there, once you've hovered on something, it will work the next time you hover on it.
Not sure if this helps with your situation, but over the last couple of days I've started to notice that certain site elements on Facebook and Weight Watchers no longer show up. Specifically it seems to be affecting items that (I believe) to be controlled by or dependent on Javascript. When I call up these sites in Firefox and Safari they work as expected.
Issue #1 -
I have read all about different solutions for getting rid of the "white space" in IE within tables, but nothing has worked so far! The page I am working on displays OK in Firefox and all other browsers. I have tried the height=100% command but that makes things so much worse and spaced out, and I have also tried deleting spaces between the different table and td tags but that doesn't change anything either. The images are exactly 115px square or twice that for a horizontal or vertical image.
Issue #2 -
I have an image gallery for each image that is SUPPOSED to appear when clicking on the image. It appears fine in Firefox and Chrome, but IE won't show the image gallery. Help on getting that javascript to work?
You can see our "live" site at www.tracystonearchitect.com (it is just the main home page - the rest of the site is in flash.. which we are working on converting) - it appears 100% correct in Chrome, the spacing issue and image gallery issue shows up in IE, and in Firefox the fonts I used aren't loading right.. which is another issue that I may have already figured out locally, but havent posted the updates yet.
I'm still pretty new at all this coding stuff, so may be a user-error. I've also been trying different techniques to fix these problems so things may be a bit awry based on my trying the different solutions. I'd appreciated any ideas or thoughts on how to fix the space-- or any other code technique comments!
Please help, I really need a solution for this.
As Per Issue #1
Do you have developer tools for your IE. This has become essential for me to troubleshoot and debug web pages. I took a look at your page. In the dev tools look for find in the menu and choose select element by click. Do this for several img. Look to the right of the dev screen and select layout. I noticed the offset varied between different pictures.
See this other SO topic How do I get rid of an element's offset using CSS?. Your on the right track with the css reset i saw in your code. Just keep going. The article mentions positioning as a possible cause.
As Per Issue #2
I wish i had more time to dig into this. I researched the error and found many hits most likely a syntax error. See this SO topic Possible cases for Javascript error: "Expected identifier, string or number"
I hope this points you in the right direction.
As part of a school project, I have DIVs that I need to be able to move. I have it working, and it works perfectly in Firefox. However, in other browsers, it doesn't really work that well. In IE9, it doesn't work at all. In Safari, it lags, even when only one div is up. In Opera and Chrome, it works fine when there's only one div, but if there are several divs on top of each other, and I try to move one over the others, it lags.
I've been going at it for a while, and I've really run out of ideas as to what could cause it.
As this is for school, we're not allowed to use any libraries (as this would have simplified it quite a bit).
The code for making divs draggable is here: http://pastebin.com/4TGRg1AW
Are you not allowed to use something like jQuery? It takes care of a lot of js browser compatibility issues.
With this project at work, we have had to make a iPad HTML5. Using Backbone and jQuery Mobile, we thought we were on to a winner, but jQuery Mobile seems to be causing more problems than it should be. Using such things as page transitions with jQuery Mobile is painfully slow, choppy and glitchy (I do understand it's still in Alpha).
For our needs, we do want a smooth way of transitions between pages. I set about doing some experiments to see if I could get them any better for bespoke solution. I feel I'm quite close with this, but the animations still seem choppy and glitchy. I wonder if there is any other way to approach this? Or if there is a nugget of information that will help getting this rock solid?
I'm using translateX()/translateY() CSS3 (hardware accelerated) transforms to ensure it gets the best performance, but it still seems unreliable with it's performance. Sometimes it's ok, sometimes it's not.
I have uploaded an example... Please note, this is only tested in Chrome/Safari (which it looks fine in) and Mobile Safari on the iPad 1st generation (which it looks choppy in). If you happen to have an iPad handy, please take a look at this example...
http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/
It's made as a basic plugin, because once I have this nailed I want to develop it more.
Can anyone help with this? I just wonder why it's still choppy on the iPad?
UPDATE: I tried using translate3d() as well as the translateX and translateY(), made no difference.
Only 3 dimensional transforms are hardware accelerated on the iPad. You should use translate3d and provide a 3rd parameter, set to zero.
http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html