i tried to reproduce a problem, that occurs in a special combination: windows7 + chrome + soundclouds iframe widget - this problem does not occur on firefox, nor does it seem to exist on mac systems:
if i include soundcloud's iframe within a rotated div over another (back-)rotated div, everything is blurry after the iframe:
http://jsfiddle.net/aqbyhqr1/10/
css code:
.outer {
background-color: red;
width: 100%;
-ms-transform: rotate(1deg); /* IE 9 */
-webkit-transform: rotate(1deg); /* Chrome, Safari, Opera */
transform: rotate(1deg);
}
.inner {
-ms-transform: rotate(-1deg); /* IE 9 */
-webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
transform: rotate(-1deg);
/* this or backface-visibility: hidden; does not fix the problem */
-webkit-transform-origin: 50% 51%;
-ms-transform-origin: 50% 51%;
transform-origin: 50% 51%;
}
on what i currently work, it's even worse:
i found some advise here to use backface-visibility: hidden; and/or transform-origin: 50% 51%;, but it did not change anything.
Related
I try to find out the problem but since i'm not css guru I need the help.
I have slider and I try to set custom image on slider-thumb.
The issue is: slider-thumb minimum and maximum position do not reach at the end of range:
This is a demo I play with:
DEMO - try to move thumb bottom-up
This is a code (BTW I use Ionic)
<div class="aa-volume wm-volume-range range" style="position: absolute;top: 3rem;left: 0rem;">
<input type="range" name="volume"
min="0" max="100"
value="{{displayDevice.fan_volume.value}}" ng-model="displayDevice.fan_volume.value" integer
style="max-width: 8rem;width: 8rem;min-width: 8rem;">
</div>
and css:
.wm-volume-range.range {
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
.wm-volume-range.range i.icon {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.wm-volume-range.range span {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.aa-volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 38px;
height: 16px;
border-radius: 0px;
background-image: url('http://www.lesliesanford.com/vst/knobman/files/slider-thumbs/SimpleSliderThumb.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, #a1a1a1)
);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background-size: 48px 24px;
background-repeat: no-repeat;
background-position: 50%;
}
Can anybody help to solve it?
The problem is that when you rotate your thumb it keeps its center and it doesn't reach the end of the track. If you don't rotate it, it works
The easiest way would be to rotate the file image before setting it as the background-image of your range thumb.
Otherwise, you can create a custom thumb and move it to follow the real hidden cursor. You can see an example here (the second range).
I want to keep a rotated fixed sidebar exactly 79% from the left but when I add white-space: nowrap; it messes up the location. Perhaps its easier to get the sidebar to stay exactly a # of px's away from a middle div?
https://jsfiddle.net/cs6bya2g/embedded/result/
#sidebar-miniright {
position: fixed;
top: 50%;
left:79%;
width:25%;
/* Safari */
-webkit-transform: rotate(-270deg);
/* Firefox */
-moz-transform: rotate(-270deg);
/* IE */
-ms-transform: rotate(-270deg);
/* Opera */
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.sidebar-right {
width:auto;
}
^ This is what I want always. But when I resize browser it becomes like the following pic. When I add white-space: nowrap; it causes the left: 79%; to become wonky.
Your sidebar element is rotated on its side, which means width: 25% will make the sidebar's height be 25% the width of the window.
A solution is to delete the width: 25% rule. Update your transform properties to:
-webkit-transform: rotate(-270deg) translateX(-50%);
-moz-transform: rotate(-270deg) translateX(-50%);
-ms-transform: rotate(-270deg) translateX(-50%);
-o-transform: rotate(-270deg) translateX(-50%);
transform: rotate(-270deg) translateX(-50%);
This will center the sidebar text vertically. You can play around with the translateX values to get the desired result.
I have a div with a border-radius, which is rotated using keyframes.
Look at this Fiddle in firefox.
To replicate the problem: let the window size be less than the circle drawn on the page(both in height and width).
Now the problem is that the parent of the rotating div, i.e. body in this case, is resizing to a larger width at some points while the rotation is going on.
The same code in Chrome appears like the parent is resized to a greater width and height once and then it becomes stable.
My question is (even though I have rotated the circle within parent with radius = r): why does the parent width and height increases to greater than r while rotating the div?
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='circle'>
rotated
</div>
The problem:
This (odd) behavior is caused because , what you are rotating isn't really a circle, its actually a block(inline block), which has four corners, just a square.
When you define a border radius it is not changed to a circle, instead its borders become rounded, the element is still a square.
Now, before you rotate the div(circle), which actually is a square, its parent has a width & height equal its child(by default, since it is the only child of its parent in your case),
i.e say width=height= r.
now when you rotate the div, so you rotate a square, and thus when, the square comes diagonally horizontal( or vertical), it gets the maximum height & width.
i.e diagonal=√2r, thus, height = width= √2r i.e 1.41*r, this is surely 41% greater than the original radius of the circle.
Now, this is where the parent is increased in width and height.
The solution:
The solution is quite simple, wrap your circle with a parent, and let it hide the overflow. See this Fiddle
now this does not actually make the element itself circular, but will remove excessive, space outside the circle, which overflows the parent.
.parent {
width: 100%;
height: 100%;
overflow: hidden;
}
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='parent'>
<div class='circle'>
rotated
</div>
</div>
Does anyone know how to successfully implement vertical text in IE7, IE8, IE9, and IE10 with CSS only? (by vertical text, I'm referring to text being rotated counterclockwise 90 degrees)
This is what I have implemented today, which I think should be correct:
.counterclockwise-text {
/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
/* Firefox */
-moz-transform: rotate(-90deg);
-moz-transform-origin: 50% 50%;
/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 50% 50%;
/* This should work for IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */
zoom: 1\9;
writing-mode: tb-rl\9;
filter: flipv fliph;
}
However, IE10 is not ignoring the "\9" CSS hack -- it will pick up those values and rotate the text another 90 degrees. A useful solution would be a way to do vertical text in IE8 and below that will not be picked up by IE10. I really want to avoid having an IE8-only stylesheet, or having a media query to detect IE10. I'm just looking for a way to modify the CSS above to have vertical text in all browsers. Thank you!
EDIT:
For what it is worth, I also tried the code below that uses a filter to rotate the text. This may work for most cases, but in my instance a lot of the text is cut off by the restricted (non-rotated?) constrains of the wrapping element.
.counterclockwise-text {
/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
/* Firefox */
-moz-transform: rotate(-90deg);
-moz-transform-origin: 50% 50%;
/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 50% 50%;
/* IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* IE8 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* IE7 or less */
*zoom: 1;
*writing-mode: tb-rl;
*filter: flipv fliph;
}
I still have not found a way to do this with pure CSS where IE10 and IE8 are happy.
Here is pure CSS ( + 1 extra div for every text ) solution
Works for all IE versions IE7-10
/**
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
*/
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
/* this is for shity "non IE" browsers
that doesn't support writing-mode */
-webkit-transform: translate(1.1em,0) rotate(90deg);
-moz-transform: translate(1.1em,0) rotate(90deg);
-o-transform: translate(1.1em,0) rotate(90deg);
transform: translate(1.1em,0) rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* IE9+ */
-ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */
-ms-writing-mode: tb-rl;
/* IE7 and below */
*writing-mode: tb-rl;
}
.rotated-text__inner:before {
content: "";
float: left;
margin-top: 100%;
}
/* mininless css that used just for this demo */
.container {
float: left;
}
HTML example
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
</div>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Normal</span></div>
</div>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>
</body>
</html>
source: https://gist.github.com/obenjiro/7406727
You should use conditionnal comment for older IEs .
That what they are meant for and it will do no hurts nor hack (ing head) s :)
Having the same problem, but with additional bad readability of the rotated text, I would advice not to use the:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
for IE9 or IE 8.
That's, what worked for me:
p.css-vertical-text {
color:#333;
border:0px solid red;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
}
from http://scottgale.com/css-vertical-text/2010/03/01/
I am using the following in IE9:
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
It works in the way it rotates the text, but oddly it gives the element a black background for no reason?!
The CSS:
.view-see-the-difference-in-your-sector .views-field-title span {
display: block;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom: 1;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
width: 200px;
}
Also notice I have an origin for all browser rotations apart from the filter one.
What is the correct syntax to use here?
I find this hack that fix the problem for me. You should add filter:none; style to the container with black background. Somehow ie9 does not support filter style used for ie8 so you have to disable it. In your case:
.ie9 .view-see-the-difference-in-your-sector .views-field-title span {
filter:none;
}
You have to detect if your browser is ie9 and add this class to some parent node like the body tag.
We were using : transform: rotate(45deg); not working in Chrome and IE9.
First Try : Tried solution given in CSS rotate property in IE, it was not working in IE9.
i.e:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg);
Solution : Final solution i.e:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg);
-ms-transform: rotate(45deg);
ms-transform: rotate(45deg); /* This Line did the trick for IE9
Found the solution from following URL : http://bugs.jquery.com/ticket/8346