I am having an interesting problem with clipping while performing a 3d rotation. I am rotating an element using :
-webkit-transform: rotate3d(0, 1, 1, 180deg);
During the animation it looks fine in Chrome, Firefox, and any other browser except for Safari.
The window is clipping through the elements behind it.This shouldn't be a z-index issue as I have assigned proper z-index to these elements.
Anyone know what could be causing this to happen just in Safari?
This is what is looks like in Safari during animation:
And properly animated in Chrome
Thanks!
Try setting the container of the rotated modal transform-style: flat and a new perspective. You need to change 3D rendering context.
This is related answer https://stackoverflow.com/a/18167565/1663572 -- but you probably don't want to change the position on Z axis as it changes the appearence dramatically. I couldn't use it also.
It's been a while, but I had the same issue, and actimel linked to an elegant workaround. (Though as they stated, it'll only work the background elements aren't already transformed 3D.)
Add these two lines to the background elements (or a container with those elements inside, or a class that all of those elements are part of):
-webkit-transform: translateZ(-1000px);
-webkit-perspective-origin: 100% 100% none;
Good luck future readers! :)
It could be that in the version of safari you are using, z-index is not well supported Check can I use.com
Related
I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.
http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.
Working solution for flickering elements during transition in Chrome is to set up CSS for parent node:
-webkit-backface-visibility: hidden;
The solution for me was to apply the bellow css to the parent of all affected elements.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration causes MacOS to switch from subpixel to greyscale antialiasing which makes the font weight appear to decrease noticeably.
Update:
As the OP notes below, the fix is to apply -webkit-font-smoothing: antialiased - which applies grayscale anti-aliasing at all times. If you do this, you'll probably want to increase your font-weights all around since greyscale anti-aliased text looks notably thinner than sub-pixel
You can get the same effect by applying properties that cause the content to always be GPU accelerated (such as back-face-visibility: hidden) but because these are not guaranteed to cause GPU acceleration in future browser versions - it is more future proofed to simply specify greyscale.
I was having the same issue in Chrome but not Firefox.
The temporary fix is to add a web-kit fix and remove the transition:
-webkit-transition: none;
I am playing around with CSS transition and rotate effects for displaying a business card. I got everything to function properly in Chrome and FF but in Safari it distorts the div.
I tried applying the following properties to no avail:
transform: translateZ(0px);
transform-style: flat;
transform: translate3d(0,0,0);
See Codepen for code and pics below:
Safari:
Chrome:
I believe this is an issue with stacking references and CSS transforms clashing.
Try adding:
-webkit-transform: translate3d(0,0,0);
to the parent element of your card. That should form the transformed children to obey the z-index stacking.
If anyone else has some input on this that would be great.
try
This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824
Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.
I am designing an html5 mobile application that has an overlay that appears at various points in the app. The overlay may be at the top of the z index visually, but interactively, it sites behind a div below that is intercepting clicks intended for the overlay. I think I know why it is occurring (CSS stacking context for an element below) but I don't know how to work around it.
This issue is very similar to this prior question but the resolutions don't seem to apply in this instance. Stacking context has never messed with me before I started applying CSS3 animations and transforms to my layouts. Now I am a mess.
So far I have tried transform-style: flat; -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); and a thousand different z-index approaches to try and keep the lower z-index elements from blocking clicks intended for the overlay. I am at a loss and could use some outside perspective.
I have a codepen that illustrates the issue perfectly here.
If you use a translate3D in z to move your content back, it now works. Chang your div2 style to this:
-webkit-transform: translate3D(0px,0px,-1px) rotateX(180deg);
I'm experiencing something pretty weird and tricky with WebKit. I'm playing around with a CSS animation, where a div is rotating around the Y axe, while another div in background is doing nothing. Problem is that, in Safari, the div that is rotating gets cut by the first div, instead of rotating on top of it.
It's a little bit hard to explain, so here's a JSfiddle.
http://jsfiddle.net/HMF6f/
Some mentioned that adding a 3d translation could fix it (like below), but in the case of a complex animation, this totally changes the visual look, and that's not working for me.
-webkit-transform: translate3d(0, 0, 100px) rotateY(-50deg);
I like how Chrome behaves with this, and I'd like to have a same behavior. Any idea on how to achieve this?
Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-filter:) everything looks OK - see the difference below.
Is there any thing I can do about this?
You could check out the answer to the question css transform, jagged edges in chrome
Helped me out
From the accepted answer:
In case anyone's searching for this later on, a nice trick to get rid
of those jagged edges on CSS transformations in Chrome is to add the
CSS property -webkit-backface-visibility with a value of hidden.
In my own tests, this has completely smoothed them out. Hope that
helps.
It appears to be an Antialiasing bug in the webkit engine. A report has been filed but is as yet unsolved.
You can try adding a border the same color as your background to try to minimise the effect.
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);
Does the trick for chrome.
Have you tried the CSS rule -webkit-transform-style: preserve-3d;?
You could also try rotating the specific axis with -webkit-transform: rotateZ(-5deg);.
I encountered this issue on Chrome 33 (Windows 7). I tried all the suggested fixes on this page. Misery ensued. My rotation was pretty simple:
transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
I found this answer and after some quick experimentation I found that the following combination works perfectly in Chrome:
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
I haven't tested cross browser yet. I have no idea which further bugs this introduces. You have been warned. Hope this points someone in the right direction.
Side note: During my experiments I found that -webkit-backface-visibility: hidden; (on its own) removed the antialiasing from untransformed images.
This is a WebKit bug that has been already fixed and the fix shall appear in Chrome 15.
The workaround until everyone updates to 15+ is to apply -webkit-backface-visibility: hidden; to the element being rotated. Worked for me. That triggers antialiasing on the element.
You can add box-shadow to your images with the same color as your background, that reduce the effect.
example:
http://antialiasing-webkit.qip.li/edit/
This won't be appropriate for all uses, but where you have control over the markup and don't mind adding an extra <div>, you can make use of generated content to dramatically clean up the edges of rotated images in Chrome. This works because Chrome will apply anti-aliasing to the generated content placed over the image.
You can see an example here: http://jsfiddle.net/cherryflavourpez/2SKQW/2/
The first image has nothing done to it, the second has a border applied to match the background colour - not any difference that I can see.
The third image div has some generated content with a border placed around the edge. You lose a pixel around the edge, but it looks much better. The CSS is pretty self-explanatory. This has the advantage of not requiring you to create the border in your image, which seems like too big a price to me.
For me it was the perspective CSS property that did the trick:
-webkit-perspective: 1000;
Completely illogical in my case as I use no 3d transitions, but works nonetheless.