I have a page that uses a number of simple animations, including some JavaScript animations that add/remove CSS classes to elements with CSS3 animations for rotations. I am not using canvas.
On the PC, the page looks great in Chrome/Safari, Firefox, and IE, but on Macs, a number of elements are completely missing on the page when it is viewed in WebKit (Chrome, and Safari 5.0.3). It looks fine in Firefox on Mac. The missing elements don't have any animations applied to them -- I don't see any connection between them and the animations.
The page validates, the CSS nearly validates except for the vendor extensions and the zoom property in my clearfix. Disabling all of the JavaScript on the page doesn't change anything. The missing elements are in the source, they are just not visible on the page.
At first glance, it looks like the Z-indexes have gotten screwy on the invisible elements. Changing these doesn't affect the problem though. Removing all of the absolute, relative, fixed positions, as well as floated elements in the entire document doesn't affect the problem. The only action that does anything, is removing all of the Webkit animations.
And when I apply all of the animations, nearly everything on the page disappears!
Here is an example of one of my animations -- simple stuff:
#-webkit-keyframes propeller {
0% {-webkit-transform: rotateX(90deg);}
50% {-webkit-transform: rotateX(1deg);}
100% {-webkit-transform: rotateX(90deg);}
}
#element {
-webkit-animation:propeller 1s linear;
-webkit-transform-origin:50% 50%;
}
Even if the animation is not called, simply the presence of the keyframes causes the page to break.
If I use this animation in particular (just the -webkit- vendor prefix), it causes a large form to vanish that is a sibling of the great-great ancestor of "#element."
Here is a link to the page I'm working on. I had nothing to do with the design:
http://goo.gl/6XXcV
All of the animations are contained in animations.css and all the JavaScript animations are in general.js.
This has been very slow-going for me since I don't have a Mac -- I'm just using Microsoft Expression Web 4 SuperPreview -- but my client has a Mac and is not impressed. Thanks in advance for any advice.
I just pulled up the site in Chrome for mac and Firefox for mac (versions 22.0.1229.94 and 14.0.1 respectively) and aside from a couple spacing differences (which are minor) the look the same. The only odd thing I see is the light blue background showing up next to all the graphics if your window is narrow enough to warrant (the seemingly needless) horizontal scroll.
What exactly is missing?
For the most part, the trouble turned out to be from bugs in Microsoft Expression Web 4 SuperPreview with their Mac/Safari 5.0.3 emulator service. When any -webkit- vendor prefixes are used for CSS3 animations, it causes elements seemingly unrelated to the animations to behave as if they have visibility:hidden.
The similar problems with the disappearing elements first reported by my client using an actual Mac with Chrome seem to be from a bad .svg font conversion that was being used with #font-face. Although the svg font was rendering on Mac/Webkit, it appeared to be destroying styles on elements in which it was used as well as parent elements. When I converted the font once more to svg using a different conversion utility, the problem resolved. Weird.
Related
I do not know how it has happened, because it worked properly at some point, but after doing some changes, I think to the main scroll container layer of the page, this started happening.
It is a weird visual glitch, I am not able of reproducing it, all that I can say is that the transition is a CSS transition with transform: translateX() and that while the transition is running both elements (new and old) get an absolute position that its remove once the animation ends. Also, there aren't any text-shadows in place.
I does not happen in firefox nor in chrome mobile, and it does not happen always, depends on if I have or not the developer tools opened, I think it might be because of the change in viewport resolution when those are open.
I have this issue as well;
fiddle
Seems it has to do with multiple layers of nested animations.
Its a bit to complicated to outline here!
Here's a reproduction of my issue (codepen because apparently stackoverflow's iframe affects the rendering somehow):
https://codepen.io/Ironimus/pen/GRjxpXZ
When using transform: translateZ and perspective inner elements' edges and text become blurry. It works very differently in different browsers, too. In case it also depends on screen or OS, here are a few screenshots with descriptions:
In Google Chrome transform: scale(2) is fine. Text and inner elements become blurry depending on the width of the element with perspective, and it follows very strange logic, when I set the width to 847px or higher it breaks, lower looks ok:
In Mozilla Firefox text becomes blurry if perspective/translateZ combination is used, inner elements are fine, transform: scale(2) is ok as well. width doesn't seem to affect anything:
In Safari everything is hella blurry whatever I do:
Why is it blurry at all and how do I make it right? Using transform: scale(2) for everything isn't a viable option. Are there maybe some rules I should follow to help browsers render 3D transforms with text right?
Supporting Safari isn't a priority but would still be nice
Have you tried adding a custom -webkit to the browser?
I am probably late with this answer but I recently encountered the same behavior when implementing a parallax design for a website.
This is a problem related to text being rendered as bitmaps in Safari, which are not re-rendered on transform: scale(x); but instead blown up in size.
It is possible to manually trigger a re-render of the text in some cases, however this is very finicky and there's no guaranteed way to make it work.
A more comprehensive answer to this was provided by Jack in this thread:
Transform scale() Safari bug when used on elements with border
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'm having a strange issue with transitions and transforms in Safari in the sub-900px media query in desktop and iOS. They mostly work well, with the exception of the a.logo element on this site:
http://eclipseinterface.com/#welcome
It feels like the transition happens with all of the other elements, but the transform property just pops into place when the transition ends.
I've tried advice on SO that wants me to vendor prefix the translate parameter as well, but that seems to make no difference.
Any thoughts? I've been picking at this bug for a few hours now :(
I try to make a flip-page effect in IE10.
Because IE10 doesn't support transform-style: preserve-3d;
i have to flip each side seperately. It works well in recent browsers but there is no perspective in IE10.
If i write perspective: 1000px; in the container(.flipper), backface-visibility/z-index is not working correctly.
Have a look at tis jsfiddle:
http://jsfiddle.net/wG6gk/2/
I have no clue why you have xpersepective in your CSS, IE10 is unprefixed in CSS, however the perspective property must have some kind of unit for the depth, perspective: 1000 won't be applied because the browser doesn't know what unit it is in, similarly like width and height, etc, you have to apply px, em, etc. The only browsers that assume units (and in pixels) on the perspective property are Webkit browsers, and only when it is inside the transform property.
If you do a little research you, Microsoft states:
The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
So for now, you'll just have to implement the advised fix, if you want to go down that road.
If not, you're lucky. I spent time trying to make it transition smoothly over. Originally in your fiddle, you were transforming it very awkwardly and had too many styles, in my opinion, so the techniques in this JSfiddle should help: http://jsfiddle.net/NAy2r
Explained fiddle
So basically the front content exists in the container div, while the back content exists in the back div, which exists inside the container div. This is very similar to Apple's HTML5 Card flip demo, however there is a twist when it comes to backface-visibility.
At the time that Apple relased that demo, backface-visibiity didn't work on Chrome or Firefox. Chrome had some concept of perspective, but none of backface-visibility, so when you flipped an element, you'd still see through to the back and the content of the back would show through both sides as well; However on Safari, it'd be perfect because it initially understood these concepts.
In further updates of Chrome in the months afterwards, Chrome understood the property, however it was applied literally and the back was hidden completely, regardless if you flipped it or not! What would be the point of having this property if it was going to hide the back completely no matter what? You could just apply display:none, etc, to show the back if you wanted!!
And that is where IE stands as of today, it as well doesn't recognize the 'back' of the element (an element with transform:rotateY(180deg) is considered to be the backside) like other modern browsers do. So when the element is flipped, backface-visibilty: hidden is taken literally as it was in Chrome!
So this fiddle listens on an AnimationStart event on the container div, and on the animation start, it finds the duration of the animation and it uses that to calculate halfway though the animation, so when the animation is halfway, it changes backface-visibility to visible, that way the animation smoothly transitions like it's supposed to.
This was a pain to develop, IE10 is somewhat inconsistent, as it needs time to process it the first time (probably the jQuery). Notice the relief, lack of headache and fiery red eyes. The air around you has become cooler and you can finally breathe, because now you're not alone.
Edit: I forgot to add, that if your animation or transition has a different timing, the timing in this script will have to be adjusted, as it only works with linear transitions, as of now...