I created a class and I am trying to rotate 45 degrees in CSS, but Chrome says "Invalid property value"
.cr {
background-color: #444;
position: absolute;
left: 5px;
top: 13.5px;
width: 20px;
height: 3px;
-o-webkit-transform: rotate(45deg);
-o-moz-transform: rotate(45deg);
-o-ms-transform: rotate(45);
transform: rotate(45deg);
}
<div class="cr"></div>
Why is this happening??
You don't need the o-webkit.
o stands for Opera, webkit is the engine behind Chrome.
It's simply -webkit-transform: rotate(45deg);
Same with the moz prefix.
Correct is
/* Transform */
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
Check out caniuse.com which prefixes are needed for which browsers or use a service like http://prefixmycss.com/.
On caniuse.com click "Show all" to see more than the last few versions. You probably want to keep the Opera prefixes although it's not needed in recent versions but version 12 which is still quite popular requires them.
Even better would be an automation tool like grunt but that is out of scope for this question.
Related
I have website www.stanosimkovic.sk and i have problem with vertical positioning right element with text on main page in IE browser. In another browsers it load correctly. Can somebody help me how to fix this issue.
I think problem is somewhere in CSS
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
But dont know how resolve it, because in Chrome Opera etc. its OK.
Depending of the version of IE, the transform property might not work. So what you have to do is add the vendors prefix. So it should look like this (-ms- is for IE) :
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
}
Hope it helps !
In the following example a DIV containing some text (example A), get slightly blurred when has a transform: translate CSS applied.
When instead in Text example B, fonts is sharp.
The problem happens only on Google Chrome and works fine on FireFox 46.0.1.
I was able to reproduce it on:
Google Chrome Version 51.0.2704.84 m
Google Chrome Version 53.0.2768.0 canary (64-bit)
I would like to know, if there is a problem with my code, or it is a bug in Chrome.
Also any idea how to solve it is welcome, keeping in consideration I would like to keep transform: translate if possible, and I mainly targeting latest Chrome and FireFox.
Notes on what I have notice so far:
Blur effect happens with different level at different font-size.
Using webkit-font-smoothing : none; does not help.
Issue happens with any font (system default or custom).
I am using Window 8.1.
Here is a live example:
#test {
position: fixed;
font-size: 20px;
top: 60%;
left: 40%;
}
#splashScreen__spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -90px);
width: 50px;
height: 50px;
}
#splashScreen__infos {
position: fixed;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-font-smoothing: none;
}
.loadingSpinner {
width: inherit;
height: inherit;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
animation: spinnerAnimation 0.7s infinite linear;
}
#keyframes spinnerAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<body>
<div data-ntv-type="Spinner" class="spinner" id="splashScreen__spinner" widgetid="splashScreen__spinner">
<div id="splashScreen__spinner__spinner" class="loadingSpinner"></div>
</div>
<div id="splashScreen__infos">A) - We are loading your website. Please wait.</div>
<div id="test">B) - We are loading your website. Please wait.</div>
</body>
This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).
In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "css hackers" to achieve some better/clearer rendering in some cases.
But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit devs fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.
How can I make this line rotation work in IE8? I used this to get the ms-filter but still wont work..
Here's a JSFIDDLE.
Heres the HTML:
<div class="mainmenu">
test
</div>
and the CSS:
.mainmenu:before {
background: none repeat scroll 0 0 #333333;
content: "";
display: block;
height: 1px;
position: relative;
right: 12.5%;
transform: rotate(-45deg);
width: 35%;
z-index:10000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}
Any Help Greatly Appreciated.. Thanks
IE8 doesn't support standard CSS3 rotation, but it does have the -ms-filter style, which is capable of doing the same thing (albeit with much more complex syntax, and some annoying caveats).
However, if you're prepared to use a bit of Javascript, I would strongly recommend using a good polyfill script for this, which will allow you to use the standard CSS rotate syntax even for old IE versions.
The best polyfill script I know of for rotation is CSS Sandpaper.
Using this means you can use (near) standard CSS code, which means that (1)your code is more consistent between browsers, and therefore easier to maintain, and (2) you don't need to learn the horrible -ms-filter syntax.
So instead of the -ms-filter code, you'd have a line that looks like this:
-sand-transform: rotate(-45deg);
In addition to rotate, CSS Sandpaper also implements a variety of other CSS3 effects into old IE versions, which makes it a very useful tool.
Hope that helps.
transform: rotate(45deg); /* CSS3 (for when it gets supported) */
-moz-transform: rotate(45deg); /* FF3.5+ */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)
I have some rotated text on my page and it is positioned using position:absolute, like below:
.rotate-box .rotate-text{
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -45px;
top: 170px;
}
<div class="rotate-box">
<span class="rotate-text">Rotated text</span>
</div>
This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.
To prevent this I have added:
#media screen and (-webkit-min-device-pixel-ratio:0){
.rotate-text {top: 80px !important;}
}
Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?
I hate adding browser exception code, it tends to come back and bite you in the long run... :o
Regards,
Anders
Change this line:
-webkit-transform: rotate(90deg);
to
-webkit-transform: rotate(90deg) translate(-100px, 16px);
As you know, this line is only used by the webkit browsers (Safari, Chrome)
You'll probably have to play around with the exact px figures, but then you can get rid of the extra #media screen tag.
Look into transform-origin. Basically, you should be able to do transform-origin: 0 0; (with all the prefixes, of course), and it'll hook the rotate to the top left, which sounds like what you want.
I've got a peculiar problem related to a requirement to display a piece of text at 45 degree angle. The requirement is to support "all browsers", however I managed to eliminate IE6 (thank-you-very-much) and older versions of Mozilla/Opera. The requirement is for this display is like this:
I can get this sorted in CSS3 compliant browsers (latest versions of pretty much everything) using this CSS/HTML:
<style type="text/css">
.homepage-top .red-corner {
position: absolute;
right: 0px;
top: 300px;
width: 0px;
height: 0px;
border-top: 55px solid #e11e2d;
border-left: 55px solid transparent;
z-index: 9;
}
.homepage-top .free {
position: absolute;
right: 3px;
top: 310px;
text-transform: uppercase;
color: white;
font-size: 10pt;
font-weight: bold;
z-index: 10;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-sand-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div class="red-corner"><!-- --></div>
<div class="free">free</div>
It works well with IE9 and newer Firefox, Safari and Opera. Then I need to get IE7 and IE8 working - and this is where it becomes interesting. I can use filter on IE7 and -ms-filter on IE8 - and I get very interesting results indeed.
The filter/-ms-filter look like this:
filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
Adding this to the .homepage-top .free selector causes IE7 to display the rotated text correctly (although with some black tint to white letters, but I can live with that) - but it ignores absolutely EVERYTHING in the css file following that line. Removing the filter line restores the rest of the CSS, but, naturally, does not rotate the text.
In IE8 everything works correctly, however adding this to the selector causes IE9 to malfunction. It seems that IE9 is trying to use both -ms-filter and -ms-transform properties - and this causes some internal confusion. As a result, IE9 display looks like this:
Clearly, something is wrong here - but how do I go about fixing this so that it works in IE7, 8 and 9?
Many thanks in advance.
You can use conditional comments to provide each MSIE its own stylecheet.
http://de.wikipedia.org/wiki/Conditional_Comments
<!--[if lte IE 8]> <style>...</style> <![endif]-->
<!--[if IE 9]> <style>...</style> <![endif]-->
Is it possible to simply use an image? I normally prefer styling plain text with CSS over using an image, but since you need to support older browsers, an image is a much simpler solution.