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?
Related
I stumbled upon a weird behaviour in Safari today, and I cannot figure out what causes the problem.
When creating an animation that rotates an SVG element in a certain pattern, with everything working perfectly fine in Chrome, Safari only shows half the SVG on every animation step.
When I remove the background-color: white; from the .container element, everything works fine. How would a background color be causing such a behaviour?
Here's a demo video as well as the corresponding JSFiddle:
JsFiddle: https://jsfiddle.net/04zgmbup/
Chrome (expected):
Safari (unexpected):
Okay, so apparently I got this problem figured out.
Safari seems to be handling the container background as a plane.
This means that when the item rotates, one half will always get rotated behind the container, which has a white background color which covers the element itself.
I still do not know why other browsers do not behave like this.
A possible solution for Safari could be to translateZ(width /2) the element, so that all rotations happen in front of the background plane.
Here's the updated fiddle, working in Safari:
https://jsfiddle.net/04zgmbup/1/
The problem can be visualized nicely by giving the container a semi-transparent background color. In the below recording, one can clearly see that half the circle gets rotated behind the container.
I am struggling with a strange problem for a couple of days now. I am using big triangles in my website. I know if i make triangles in png or any other format, there is a big chance this is gonna look crispy. Thats why i go for the svg approach.
The first thing i approached was a big border under the svg elements. This was fixed by simply adding vertical-align: top; to the svg element.
The problem is that it is very buggy in some browsers. Some browsers show a line beneath it when resizing. Sometimes the line is always there.
The following image illustrates the problem, this is taking in safari 10.1 when resized:
This is how it should be
The svg are absolutely positioned i
Is there anyone who has faced this problem before and can help me out with this?
Thanks for you're help guys, really appreciate it!
I ended up with a (dirty) fix.
The elements that are aligned to the bottom i gave a transform: translate(0, 0.4px);
And the elements that are aligned to the top i gave a transform: translate(0, -0.4px);
For now this seems a good fix without disrupting the layout!
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
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.
I need to recreate the following design using only CSS:
What you're seeing in the picture is the top of a website container - the "links" are part of the main menu.
As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image.
For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple browsers.
I was thinking along the lines of a positioned and rotated div with a white background and a box shadow, but I haven't been able to build it yet.
Any ideas?
There is something called Sandpaper that can help you to transform your elements, even in IE!
.myDiv {
-sand-transform: rotate(45deg);
}
You can just plug it into your site and you're set.
Also you can use CSS3 transforms, which you asked about in your question: "Using nothing but CSS."
To do this you'd use:
.myDiv {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}
And thanks to Josh and Robert for the Opera equivalent:
-o-transform: rotate(45deg);
Internet Explorer will drop ClearType on any text that has a filter applied to it. But you can add empty extra element inside the main one and apply filter to this extra element. After this ClearType will be not ruined and the same result can be achieved.
For rotation, you're looking for:
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
Keep in mind, that the rotation is a CSS3 attribute, so you're not going to get the same behavior across all browsers. Rather than making just the slant with an image, it would probably be better to recreate the whole outline. I'd approach it with:
The header section, which would have the slant, shadow, the menu background and the padding at the top of the content, pretty much like your screenshot there.
An image that can repeat-y down the entire body of content with a shadow.
The footer section.
You can also use external libraries to attempt to recreate CSS3 attributes, but images may be the easiest way as you know how they'll render.
I think you can use the techniques from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
This is a really nice compilation and inspiration for using CSS. Enjoy.
PS: it is safer than CSS3 transforms.
Rotation seems unnecessary. I would try using a CSS triangle effect.
I'm going to assume your links are in a ul so your css could select ul:before and make it into the correct shape.
I don't know what will happen with the box-shadow but it might be worth a shot, and will probably be easier to align in IE without resorting to JavaScript.