I have areas on my site where text is rotated 45degrees and unfortunately rendering of that text is messed up sometimes. For example, it looks relatively ok on linux using FF and chrome, however, it looks awful on the same browsers on windows. However, IE 9-10 renders that rotated text perfectly. Is there any way to overcome this messed up text?
Here's an example:
example
.wrap {height:200px; width:200px; position: absolute; top:100px;left:100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.test1 {background: green; width:150px; height:30px; color:white;text-align: center;line-height:30px;font-family:arial; font-size:12px;font-weight:bold;}
P.S. I cannot use images to replace text, I need rotated dynamic text instead.
Thanks
See Wonky text anti-aliasing when rotating with webkit-transform in Chrome.
The answer there recommends amending your transformation with an additional transform that triggers the 3-D processing:
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
In addition to the fix offered there, there are a few other tricks used for cleaning up webfont rendering (see How To: Clean Up Chrome and Safari's Webfont Rendering). Try adding a barely perceptible text-shadow (may or may not work):
text-shadow: rgba(255,255,255,0.01) 0 0 1px;
Related
I am making some animation and graphics libraries to work with html. For some things clipping is needed and since the elements are generated dynamically, clip-path (mostly polygon) is added dynamicaly in elements'a style property :
el.style.clipPath = 'polygon(..)';
Firefox (76) works just fine, however Chrome (83) (and Opera as well) dont respect the clip-path property (on chrome element inspect it is not even shown on element's style properties as present)
It was supposed to be a bug in Chrome prior to v.64 but wherever I looked it says latest chrome (and webkit browsers in general) have full support for clip-path and polygon in particular.
Note: It is not an issue to test with url of svg path to be used a clip mask, but I would like to avoid svg, I would like to keep it pure html/css (however if i rememeber correctly not even svg inline url works with chrome when I was pulling my hair trying to figure out why it doesnt work as expected).
I have also tried adding with browser prefix (ie el.style.WebkitClipPath = 'polygon(..)') but nothing changed.
Test example should display a triangle (doesnt work on Chrome, at least my latest Chrome 83.0.4103.61 64bit windows):
var test = document.getElementById('test');
test.style.clipPath = 'border-box polygon(0px 0px, 200px 100px, 0px 200px)';
#test{
position:relative;
width: 200px;
height:200px;
background: #ff0000;
padding: 0;
margin: 0;
border: 2px solid #00ff00;
box-sizing: border-box;
overflow: hidden;
}
<div id="test"></div>
What am I missing? Does chrome support clip-path with polygon, or not?
To sum up the comments by #TemaniAfif in an answer so it stays:
If border-box is removed from clip-path, eg:
test.style.clipPath = 'polygon(..)';
then it works in Chrome too. However as per the latest spec on MDN, the following is valid combination and should be supported (support for Chrome on that page is green as grass):
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
The clip-path assumes a box model anyway, and it is imperative in certain cases that user sets the assumed box-model, for clipping, explicitly, so that is why combined values are supported. But it seems it is not so for Chrome (and Opera as far as I have tested).
So this is only a workaround untill full support of the feature is provided.
I have just noticed strange behavior of semi-transparent text with negative letter-spacing in Chrome. Basically, this CSS leads to darker intersections:
div {
opacity: .5;
letter-spacing: -.2em;
}
Here's the screenshot:
Is there any CSS instruction to handle with this, so intersections will look the same in different browsers? Screenshot was made in Win Chrome 76.0.3809.100 (64-bit)
Fiddle → https://jsfiddle.net/yakunins/gcatnksh/
Looks more like bug in Chrome — https://bugs.chromium.org/p/chromium/issues/detail?id=1006140
I am using background-clip on a heading h2 in my website, but somehow is not working on Edge. In Chrome and Firefox is amazing, but when I open in Edge the heading h2 is there but with transparent (i guess). I checked on caniuse.com and says that is supported on edge. So I don´t understand why is working every browser less this one.
I used the same #supports(-webkit-background-clip:text) just in case it won't support somehow, but because it is supported doesn't work and the heading is transparent.
This is my code:
.heading__secondary{
text-transform:uppercase;
font-size:$default-heading2-size;
letter-spacing:0.3rem;
font-weight:600;
line-height:1.5;
background-image:linear-gradient(to right, $color-secondary-dark, $color-primary-dark);
display:inline-block;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
transition:all .2s ease-in-out;
&:hover {
transform: rotate(-2deg) scale(1.06);
}
I just want to know what I have to do to show on Edge like is showing in the other browsers.
I try to test the sample code from MDN site and it looks the sample for background-clip is working fine in MS Edge browser.
Reference:
background-clip
I also tried to test your code above. If you try to see the applied styles using developer tools than you can notice that background-image and &:hover is not applied.
Similar result I got in both chrome and Edge browser. This can be the root cause for the issue. You can notice in the image below that background-clip is applied successfully in Edge and chrome both browser.
It means that some other style code creating this issue. I suggest you to use the developer tools to find the applied styles for any specific element on your web page may help you to find the cause for this issue.
If issue persist than please try to provide the detailed code example including your relevant CSS and HTML code which can produce the issue with MS Edge browser. It will be better if you also try to include the snapshots of the output from chrome and Edge can help us to understand the issue in better way.
The setup
I have a series of overlapping CSS hexagons created using pseudo elements with borders. I have hover styles to change the colour of the shapes.
The issue
This hover style is causing problems when the transparent part of the shape overlaps text in other elements, causing a visible corner cut out in the text.
As the problem is difficult to explain with words alone, here is a screenshot highlighting the glitch.
The behaviour
I believe this to be a webkit only issue as it appears in Chrome but not Firefox. It may be of note that I am testing this on a Linux Mint system.
The issue occurs when you hover over the small github hexagon and remains when you exit the hex. The issue is resolved only when the large logo hexagon is hovered over. Strangely, if you hover from the logo hex to the github hex the issue only occurs when you exit the github hex.
I have put together a simplified fiddle to demonstrate the issue: http://jsfiddle.net/chicgeek/JRAn5/
The code
I am using SASS, compass, and custom mixins. I've included a snippet of the compiled styles for the offending hex. For a fuller excerpt, see the fiddle above.
.social.github {
top:1.96875em;
left:2.0625em;
display:inline-block;
text-align:center;
width:0;
line-height:0;
}
.social.github:before, .social.github:after {
position:absolute;
left:-1em;
width:1em;
border:0 solid transparent;
border-width:0.866em 0.5em;
content:'';
z-index:-1
}
.social.github:before {
border-bottom-color:#c3c3c3;
border-top:0;
bottom:0;
}
.social.github:after {
border-top-color:#c3c3c3;
border-bottom:0;
top:0;
}
.social.github:hover:before {
border-bottom-color:#675e5e;
}
.social.github:hover:after {
border-top-color:#675e5e;
}
Note: For the fiddle I am importing from Google Fonts, though for my project I have a custom icomoon font. The bug occurs with either source.
The solution..?
Have you encountered this issue before? Do you have a few minutes to play with the fiddle code above? Do you have any suggestions for tactics I could try?
I'm happy to provide more code if it's helpful in diagnosing this problem. Thanks in advance!
Updates
A friend suggested it might be an issue with the font engine. The clipping resolves when the .woff is disabled. [source]
The issue is evident on Chrome 33 (Linux, OSX), Safari (OSX) as well as Chrome 31 (Win7). The issue does not occur on Chrome 33 (Win7).
I asked some work colleagues about my issue. One of them suggested applying -webkit-backface-visibility: hidden; on the logo elements. Voodoo, it worked.
Here is the revised fiddle showing the fix:
http://jsfiddle.net/chicgeek/JRAn5/8/
Now the thing is, this shouldn't work as -webkit-backface-visibility is a property specifically for 3D transforms. Though I don't know the specific cause of the issue, I believe my problem to be a webkit-specific bug and it is just chance that this property solves it. If anyone has better understanding of either the reason for the bug or the reason that this solution works, please comment on this answer.
Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
Thoughts?
border-image is now supported in all the major browsers (2014-05-22)
Demo with a single border-left-image
Demo with different left and right images.
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.
Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)
Good solution : Chrome AND Firefox compatibility :
http://jsfiddle.net/Yas34/954/
missing border-style: solid to current "good answer"
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).