I've some issues with a transform:rotate on Chrome (v54 / Windows 10) and others modern navigators I could test (Edge, Firefox... IE), actually. The edges of my div are a bit jagged, it's not as horrible as it was in Chrome's version of 2012 but it still not perfect.
I tried several tricks as
backface-visibility: hidden;
transform: translate3d( 0, 0, 0);
-webkit-transform-style: preserve-3d;
but none of them seems to completely work. The result is smoother than the initial one but still not fully satisfying.
Here's a link to my jsfiddle : https://jsfiddle.net/2szkvj70/1/
and a screenshot :
Am I a bit too exigent or is it possible to get the perfect no-aliased result ? :)
Thanks in advance !
You can fix this by adjusting your CSS slightly:
outline: 1px solid transparent;
instead of:
outline: 1px transparent;
https://jsfiddle.net/2szkvj70/2/ - This provides a comparison.
Related
Firefox is creating small lines on the triangles I've created and rotated.
Chrome
FireFox
I've looked into what other questions have done and they recommended trying adding transform: translateZ(1px) rotate(-45deg); and background-clip: padding-box; but neither of those worked for me.
Also, it is only the rotated triangles that have the line in the firefox browser.
The page can be viewed at bingo-caller.herokuapp.com
I tried on your page and it seems to work, add translateZ(1px) to the transform for the triangles.
try this hack on the masked element: filter: blur(0.01px);
Until now desc 2022 that still haven
I fix using border with color depending to the background and can not use transparent of border color e.g I use white because my parent background is white
border: 1px solid white;
I was fiddling with the mix-blend-mode property. Everything works fine until I add something like transform: perspective(100px) or any other 3d transformation anywhere on the page, then it breaks completely. The transformation is applied but the blend mode is gone.
I tested on chrome and firefox and on linux and windows and it's the same everywhere, however on a different computer it worked fine (I don't remember what version of chrome it had and was running ubuntu).
Is that something that can be fixed with CSS or is it possibly just a hardware / GPU drivers issue?
I put background-blend-mode in tags because the mix-blend-mode tag doesn't exist yet, however this property strangely works completely fine and isn't broken by transformations.
Here is a codepen of what I am trying to achieve:
http://codepen.io/vnenkpet/pen/avWvRg
The lightning shouldn't have it's black background flashing with it but should be blended smoothly with the page background.
EDIT:
I have just found out that it actually DOES work in Firefox. Is this therefore a chrome bug? 3D Transforms shouldn't break blend mode as far as I know...
I was having a similar issue, except that applying a mix-blend-mode (multiply) higher on the page broke my transforms lower on the page (using Chrome on Mac). I was able to fix this by applying a z-index rule to the mix-blend-mode div (don't forget to set a position, too).
I'm not entirely sure if this is a bug or if it is expected behavior due to the properties of stacking contexts, though.
You can try to also apply a null transform (3D layer promotion) to the element that has mix-blend-mode specified:
.content {
mix-blend-mode: difference;
transform: translate3d(0, 0, 0);
}
This way, Chrome can successfully blend the two 3D layers together, instead of failing to blend a 3D layer and a 2D layer.
Here's a snippet demonstrating the problem and the solution:
function change(event) {
var content = document.querySelector(".content")
content.className = event.target.checked ? "content content-with-transform" : "content"
}
.parent {
text-align: center;
padding: 2rem;
font-size: 5rem;
font-weight: 700;
}
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4rem;
background-color: #AB1795;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.content {
mix-blend-mode: difference;
background-color: #167CFB;
}
.content-with-transform {
transform: translate3d(0, 0, 0);
}
<div class="parent">
<div class="fixed"></div>
<div class="content">Content</div>
</div>
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>
(I stumbled onto this problem when using will-change: transform, not an actual transform, but the solution is the same.)
I realise this is a pretty old thread, but I was having the same issue with janky transforms in Webkit/Blink using the Masonry Isotope plugin with a mix-blend-mode overlay on the grid sections until I added the following CSS to the element that was being transformed. i.e. the masonry grid element
I'm answering this in case it helps someone in future.
[your-selector-goes-here] {
perspective:1000px;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
I've come across a severe problem I can't solve..
I created an accordion element with the jQuery Plugin easyAccordion.js. While I was developing and looked over it in Firefox it worked well - until I openend it in Chrome. There you can see that the rotated text is unclear and certainly blurred, even though it has the same formatting as the un-rotated text at the top. Same for Safari.
I created a jsfiddle that sortof recreates my issue (look at it in Chrome or Safari)
.
..
http://jsfiddle.net/SfKKv/427/
..
.
This is what I'm using to rotate the text:
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
The JSFiddle is not fully working in Firefox, but that's not important here, I have it working on the website I created it in, but even the sortof broken Fiddle in FIrefox shows that it can display the rotated text a lot better.
I've found some hints towards font-smoothing and some 3d Parameters, but none seemed to work for me.
Can anyone help me with this issue?
OK, so after trying out some uncommon things I've found a fix that is not 100% perfect/accurate but good enough for me.
Here's the updated JS Fiddle, again, use it in Chrome or Safari. Use the red Hover box to see the magic in action.
http://jsfiddle.net/SfKKv/627/
All I do is change the -webkit-transform-origin from its default value (50% 50%) to something close enough such as
-webkit-transform-origin: 50% 51%;
When you try out the fiddle, you'll see it moving by that one percent. However, that's still better than the blurred text.
I found this by pure trial and error and I still don't know why the text suddenly turns sharp. If someone can explain me this behavior, let me know!
I believe this has something to do with the way Chrome is rendering the transform. The best way to see what I'm going to talk about is by going to chrome://flags/ and enabling Composited render layer borders. Now, go to the fiddle with a fix that you posted. You'll notice an orange border around several elements on the page. This border is there because it shows these elements are given their own layer when being rendered on the page.
Start tweaking the widths of the dt elements in your <dl class="easy-accordion"> using the Chrome inspector tool. The text will become blurry/clear depending on whether the width is even/odd. What appears to be happening here is the layer is being composited to a half-pixel location which is then being rendered to create the appearance of being "between" two pixels.
This is also the issue with Safari (and WebKit in general).
Check out http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome for more info.
This problem occurs when a background color is not defined for IE versions 8 and 9 and maybe some versions of Chrome (I didn't see this issue in Chrome)
Adding background-color: white; (or any color you want) to your css rotate class solves the problem.
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
background-color: white; /* fix blurry text in ie8, 9 */
I had a similar issue, the problem was having perspective in body and the rotated div. It happened only in Safari on mac. Chrome worked fine.
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-family: 'Varela Round', sans-serif, Helvetica;
transform-style: preserve-3d;//bad
perspective: 1200px;//bad
-webkit-text-size-adjust: none
}
removing the perspective from body saved me! Indeed I used perspective twice, in body and in another rotated div, which probably caused a hard to kill pixelations, even SVG and text were pixelated.
transform-style: preserve-3d;
perspective: 1200px;
removing the above styles from body saved me.
I'm using DD roundies on a list element (li) that also has a filter applied for gradient and the rounded corners dont appear, but if I remove the gradient the rounded corners appear. Is there something I can do to fix this or is this a known limitation with roundies?
#hero-tabs li {
display:block;
float:left;
width:279px;
/*height:100px;*/
font-size:11px;
line-height: 1.3;
color:#fff;
border-left:1px solid #ccc;
cursor:pointer;
background-color:#555;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}
DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');
Thanks
I have ound this also and there appears to be no work around at present. You can have one or the other, not both.
IE applies the gradient filter to the original element so the rounded elements from dd_roundies don't cover it.
It's not a limitation with roundies, it's a limitation with filter gradients. This is proved by the fact that filter gradients also cause similar problems in IE9 with standard border-radius corners.
There is no easy work-around available; the best solution is simply not to use those filter gradients in older versions of IE; so IE8 and earlier would just a fall-back solid colour background.
IE9 does have a work-around, as it can use an SVG image with a gradient as the background embedded in the CSS as a data-URL. It's a bit clunky, but it does work. IE8 doesn't have this option though.
If you must use gradients in IE8, you're pretty much forced to stick with the filter styles, and live with the bugs.
There is one other option though -- CSS3Pie. This is a small JS library similar to DD_Roundies in that it adds border-radius support to old IE versions. But in addition, it also does gradients. My advice, therefore would be to use CSS3Pie instead of DD_Roundies, and it will deal with both issues for you at once.
Hope that helps.
After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect.
Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out to fill the surrounding box (making it look a bit awful)
To reproduce the undesirable effect, try something like the following
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: rgb(98,99,100);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}
Apparently this appears to be a Windows-only problem, so for those on a Mac, here's a screenshot: (Check the 'carry on reading' button)
(source: friendlygp.com)
You'll notice that in Safari/Chrome (the latest available public downloads as well as the latest nightlies as far as I can tell), you get a rather ugly background colour bleed. However, in Firefox, you should be able to see what I'm after. If you're in Internet Explorer, woe betide you.
Does anyone know of a technique which will allow me to produce the 'correct' effect? Is there a CSS Property which I've missed that tells webkit to only have the background within the border-radius'd part of the containing box.
I could potentially use an image, but I'm really trying to avoid it. Naturally, as we're dealing with CSS3 and the landscape is continually changing, I might just have to 'lump' it and revert to an image.
However, if anyone can suggest an alternative I would be very much appreciative!
Finally, after an awfully long time, someone much cleverer than I has a solution to this:
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
is your friend :)
From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
This is, unfortunately, a known bug. You can sorta work around it by giving your element a background-coloured border big enough to cover the leaking inset shadow, but it's far from an ideal solution.