My Chrome(v. 33.0.1750.152) is acting really weird with border width of some inputs.
Here's a Codepen demonstrating it: http://codepen.io/anon/pen/Dkadl.
I added the Increase margin.. and Decrease margin.. buttons to make it easier to see (click them to change margin-bottom property accordingly).
The margin-bottom property of .user-inputs seems to be affecting the border-width of my inputs as well as blurring other elements. I've only been able to see this bug in Chrome.
What's wrong?
edit: This is how it looks like for me:
As you can see, elements get really blurry and the border-width of some elements is increased..
This is caused by the Translate 50%, on margins where it is not an integer (partial pixel), it makes the content blurry.
As answered on this similar question, add these to your #login-section block:
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
See updated Codepen
Related
I am trying to achieve an animation akin to door/folder opening by applying rotateY to a div that contains texts and images. When applied, text elements become blurry:
blurry_chrome
All that is applied to the divs are this:
.folder:hover {
transform: translateZ(0) scale(1.12);
}
.folder:hover .front-cover {
transform: perspective(1000px) rotateY(-20.44deg);
}
The problem persists even when one or the other is stripped away. Text is still blurry when only scale or rotateY is applied.
On firefox, the issue seems to actually be far worse:
blurry_firefox
I have tried quite a few hacks like translateZ(0), blur(0) and font-smoothing and it hasn't changed anything.
Is there no way to work around this if I want this effect?
Codepen: https://codepen.io/mello-code/pen/XWpzxWd
Edit:
Some of the 'solutions' I have already tried:
-webkit-font-smoothing: subpixel-antialiased;
filter: blur(0);
transform-origin: 51% 51%;
making div sizes, elements, paddings and margins even
backface-visibility: hidden;
perspective(1px) (There is already perspective applied on hover)
zoom instead of scale
None of them seem to help. Any ideas?
scale was the biggest culprit here. Scaling up over 1 causes blur, so rather than scaling up when hovered, I had the element scale down and up to 1 when hovered.
Additionally, removing perspective from transformation yielded crisp text and images.
There is:
-webkit-font-smoothing: subpixel-antialiased which should give you the sharpest result, but it is not standardized.
See more about font smoothing here:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
This answer might be also helpful:
Blurry text after using CSS transform: scale(); in Chrome
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
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.
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.