I'm trying to get this http://wrapbootstrap.com/preview/WB07061TJ template to animate sidebar under Firefox (other browsers works fine). I figure out so far that firefox needs left to be set explicitly Firefox transitions not working
I tired to add left to all possible combination and elements but still no slide animation.
Related
I've been unable to solve stuttering in Chrome/Opera when using transitions - e.g. opacity, transform, filter etc.
For simplicity, I will focus on opacity.
Live example here:
http://www.lydkontoret.dk/index.php?pgId=20&pgName=Lyd+%26+lys
When you click on one of the pictures below the banner, a large version is displayed. I do this by adding a fullscreen div on top of page to prevent access to page elements. The div is faded in via transition on opacity. On top of this div is added further divs that holds the image.
Notice the opacity transition for the fullscreen element when clicking on a picture. On a 24" monitor with browser window maximized, chrome/opera stutters like crazy, while firefox/msie/msedge is reasonably smooth.
To complicate matters, Chrome/Opera performs ok when browser window is smaller - as rendering engine apparently is able to cope.
I've tried using will-change and translateZ(0) on the various elements involved, but chrome just doesn't care (removing the banner helps a lot - as expected, because the rendering engine then has less to deal with).
Also it's mostly the fade in that stutters. When closing the image display, transition on fullscreen element back to fully transparent often looks acceptable.
I figure my coding is ok, as Firefox etc. do the various transitions nicely. So why the problem with the blink engine used by chrome and opera?
Any thoughts??
I created a flipbook animation and have tested it in Chrome, Firefox, and Safari, and you can see it in action here:
http://codepen.io/tcmulder/pen/omyuE
Unfortunately, it isn't working correctly in Safari because after the animation concludes, z-index seems to lose it's power and the leftmost page repositions itself at the top of the stack. It may be related to the issue found here:
css z-index lost after webkit transform translate3d
but the solution suggested doesn't work. I also played around with using rotate3d to change the x coordinates to trick it into a sort of pseudo-z-index overlay, but this doesn't seem to work well either.
How can I get Safari to preserve z-index after the animation concludes?
i use css3pie for my page to use css3 effects in the ie browsers.
Everything works fine. But now i have a field on my page that has a horizintal scrollbar.
In ie8 everything works finde. But in ie7 i cant scroll dragging the scrollbar. I can only use the arrows on the left and right.
and in ie9 i cant scroll.. i also cant drag the scrollbar. but if i click on the arrows on the left and right the scrolling element directly jumps to the left back..
i use pie v1.0beta5
i found that issue on many sites but there was no solution that works for me..
i have a wrapper arount my page that has a linear gradient background.. if i remove that everything works fine.. but with the gradient background i cant scroll in ie7 and ie9..
does anyone have the same problem and maybe found a solution for this problem?
nevermind, it seems you have to add the -pie-track-active:false to all ancestor elements that use a PIE behavior
I am working on this site: http://www.mywebclass.org/~jeff/ . A large percent of the ui is built with position:fixed;. In all the browsers except Safari it renders fine. But in Safari it is all messed up. Is there any way to fix this?
You have position:fixed on a few elements but you haven't set any of top, left, right, or bottom to tell the browser where they should be positioned. The browser will be left to guess (within limits) what you mean if you don't specify the position and different browsers will guess different things. The solution is to add left and top properties to all your position:fixed elements.
I use a gradient background color for selected or hovered menu items it works fine in chrome,FF,opera,ie7,ie8 . but in ie9 the background of the elements appears in the right of the element but text keeps in place this is the first problem.
the second problem i faced is the rounded corner it works fine in chrome, FF, opera but in ie9 the corners are ok but the background of the box was an image but it appears white!!!
the third problem is that of shadow
i apply shadow to the divs containing images it works fine in all browsers but ie9 offset the whole div instead of applying shadow and opacity change on mouse over increased the problem by adding black parts in the side of div that doesn't have shadow???????
when i heard that ie9 supports css3 i knew that this is unbelievable ie will still be my Nightmare!!
I'm afraid of future appearance of the website in ie 9 so i add this
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/>
when i used IE=7 or IE=8 the problem still as it is
but know it appears better after adding that line but with no support for rounded corner.
How are you telling IE9 to implement the corners and gradients? Are you using the IE filters (like I assume you're using for 7 and 8)? Or are you actually using CSS3?
If you're using filters, try making IE9 just use CSS3. You can put the filters into their own stylesheet and just use conditional comments to target IE8 and below for them, so IE9 ignores the filters altogether, that way you know they're not interfering.