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
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 the name of my portal on the bottom left corner of the browser window in a vertical direction.
The following is the css styling i am using but the text is coming with a margin to the left and bit of text is also getting clipped.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:60px;
position: fixed;
left: 0;
bottom: 0;
}
can someone help in correcting my css class please.
here's the JSFiddle link
thank you.
lakshman.
Try this one :
.rotate {
transform-origin:0% bottom;
-moz-transform-origin:0% bottom;
-webkit-transform-origin:0% bottom;
-o-transform-origin:0% bottom;
-ms-transform-origin:0% bottom;
transform:rotate(-90deg) translateY(100%);
-moz-transform:rotate(-90deg) translateY(100%);
-webkit-transform:rotate(-90deg) translateY(100%);
-o-transform:rotate(-90deg) translateY(100%);
-ms-transform:rotate(-90deg) translateY(100%);
display: block;
writing-mode: tb-rl;
position: fixed;
left:0; bottom:0;
margin: auto;
font-size:60px;
background-color:lightblue;
}
<div class="rotate">
LeftBottom
</div>
If You change font-size, then change height and line-height too. You can add padding too, but then You don't need change height and line-height (only if font-size is changed).
There is fiddle example with changed font-size (height, line-height) and padding (just to see how it's working).
UPDATE : I made changes by removing height and line-height. Here and in fiddle example. It's working better.
look at this updated jsfiddle, when you rotate the text it does so from the middle of the div, so when its -90 degrees and on the bottom of the screen part of the div will rotate beneath the window.
.newRotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:70px;
position: fixed;
left: -100px;
bottom: 110px;
}
To alleviate this I changed the left and bottom position
You can try this and see if its what you are looking for.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:60px;
position: fixed;
left: -80px;
bottom: 90px;
}
I'm using this css styling :
body{
overflow: hidden;
-moz-transform: scale(1.5);
-moz-transform-origin: 0 0;
}
And it works in FF. Unfortunatelly, I do not know how to do the same thing in other popular browsers (at least, Opera, Chrome and IE).
The various prefixes you might need.
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
Supplied by Autoprefixer as accessed in Codepen.io
Just remove -moz prefix
transform: scale(1.5); /* it works in all modern browsers */
-webkit-transform: scale(1.5); /* it works for iOS and older Chrome*/
-ms-transform: scale(1.5); /* it works in IE < 11 */
I often use this code to center a div in view:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
It works great on Firefox, Internet Explorer and Chrome, however not in Safari.
What's a workaround to center an image in Safari web browser?
You need another vendor prefixed style.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please refer below to know which browser supports what and what prefix has to be added.
http://caniuse.com/#feat=transforms2d
Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).
The key for safari (including ios devices) is to add the other transform css rules and not just:
transform: translateY(-50%);
You need to add to it this group of rules:
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
Here is some working code of mine:
img.ui-li-thumb {
position: absolute;
left: 1px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
In some cases you'll have to use:
-webkit-transform: translate3d(-50%,-50%,0);
Sometimes works better with mobile browser.
.some-element {
transform: translate(50px 50px) rotate(15deg) scale(1.2);
}
if the above transform doesn't work for you, you can write those out individually as their own properties:
.some-element {
translate: 50px 50px;
rotate: 15deg;
scale: 1.2;
}
reference: https://css-tricks.com/css-individual-transform-properties-in-safari-technology-preview/
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.