I'm having a strange problem where rendering an emoji rotated to certain angles results in the emoji failing to appear.
This seems consistent across browsers, so I'm struggling to pinpoint the issue or a reasonable solution.
The code:
<style type="text/css">
.container {
background-color: #55d;
height: 500px;
padding: 50px;
width: 500px;
}
.text {
color: #fff;
font-size:2em;
margin: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div class="container">
<div class="text">This is some text 😂</div>
</div>
See http://codepen.io/anon/pen/ORgQjb for a working example, note that changing the rotation, even to 44.5 degrees will bring the emoji back.
Does anyone have a suggestion as to why this occurs, or any workarounds?
Update
Thanks to Paulie_D and some digging, it seems this issue only manifests itself on OSX (all browsers), and not Windows (tried IE/Firefox/Chrome).
I sure don't know why it happens, but after some tinkering, I do have a couple of fixes to share.
Webkit
If a Webkit-only fix is sufficient (e.g., if you're building an Electron app), you only need to add the CSS transform perspective(0), which has no visible effect, other than causing emoji to actually render.
So:
transform: rotate(45deg) perspective(0);
instead of:
transform: rotate(45deg);
Here's a fork of your example demonstrating that fix:
https://codepen.io/troywarr/pen/yEgEdr
and a reduced test case including a reference emoji to illustrate that perspective(0) doesn't change the emoji's appearance:
https://codepen.io/troywarr/pen/aKpKmx
Cross-browser
If you need a cross-browser fix, you can use a CSS animation that rotates starting at 45 degrees (or whichever multiple of 45 degrees that you need to fix) but is eternally paused:
#keyframes spin {
0% {
transform: rotate(45deg);
}
}
.working-rotated-thing {
animation: spin 1ms; /* animation-duration must be > 0 */
animation-play-state: paused;
}
Here's a fork of your example demonstrating that fix (note that I enabled Autoprefixer to avoid messing with vendor prefixes):
https://codepen.io/troywarr/pen/mKRKZB
and a reduced test case:
https://codepen.io/troywarr/pen/oyByMx
This seems to work across browsers; I checked the latest Chrome, Firefox, and Safari in macOS High Sierra, and all were well.
I am trying to get a specific design/layout for some info i am displaying, i am using Jeasyui since i like some features that i can get with it and the looks and feels too.
i am trying to get an output as the next image.
I'm having some trouble getting the table to be as i want it to be, for the rotation of the text i found some code on the internet that did help me get it but it makes it very dificult to do more mods to it. i found this css code for it
.datagrid-header-row td[rowspan="1"] {
height:100px;
/* need to be properly fixed */
-webkit-transform: rotate(-90deg);
/* Safari */
-moz-transform: rotate(-90deg);
/* Firefox */
-ms-transform: rotate(-90deg);
/* IE */
-o-transform: rotate(-90deg);
/* Opera */
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The column width is too wide, and i have been playing around with different widths in css and the HTML itself and i cant get it to fit properly. And in some of the header i need word wrap but its not working, had to use <br/> but this headers are going dynamically loaded once i get the desired output.
here is a link to my actual coding.
My fiddle
I have this stylesheet
.rotate div img
{
-webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */
-webkit-transform-origin: top right;
-moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */
-moz-transform-origin: top right;
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: top center;
-ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */
-ms-transform-origin: top right;
-sand-transform: translate(-18cm, 2.5cm) rotate(-90deg);
-sand-transform-origin top right;
max-width: 100% !important;
}
I'm having trouble with IE, the transforms are applied and are showing on screen
but when I click on the print button, the printed result is without the transforms applied to it.
(added screen in the media to see the effects, before printing)
It works fine with Firefox and Chrome
EDIT
Yes, I was testing on IE9.
Having played with it a bit more yesterday, I noticed that the image did in fact do the transform part, but what is sent to the printer is the image without the transform applied to it.
-ms-transform does not exist in IE10+. IE8 and older have no support for CSS transforms, IE9 uses only -ms-transform, and IE10 and newer use only the unprefixed transform.
See http://caniuse.com/#feat=transforms2d for more info if needed.
I has same issue but resolved by setting up media attribute to style tag as follows
<style type="text/css" media="print">
No need for fancy prefixes, just use normal transform to target MS IE!
I'm trying to create a sideways tab set against the side of the browser window - something like this:
The relevant css code so far:
left: -29px;
transform: rotate(-270deg);
-ms-transform: rotate(-270deg); /* IE 9 */
-webkit-transform: rotate(-270deg); /* Safari and Chrome */
-o-transform: rotate(-270deg); /* Opera */
-moz-transform: rotate(-270deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* for earlier versions of IE */
This works perfectly for Firefox, Chrome, and IE9 - for previous versions of IE, though, the tab doesn't show up. The problem seems to be the left: -29px; code; if I set it to 0 it looks correct in IE8 and earlier, but not in IE9, Firefox, or Chrome.
What's the best way to handle this?
As an interim hack, you could add an IE version conditional stylesheet that overrides the left property to 0:
<!--[if lt IE 9]>
<style>
#myElement {
left: 0px;
}
</style>
<![endif]-->
The problem here is probably that the origin about which the rotation occurs is not the same. I'll see if I can find anything on specifying the origin for the transform.
How can I zoom an HTML element in Firefox and Opera?
The zoom property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and Opera.
Is there any method for adding this property to Firefox and Opera?
Try this code, this’ll work:
-moz-transform: scale(2);
You can refer to this.
Zoom and transform scale are not the same thing. They are applied at different times. Zoom is applied before the rendering happens, transform - after. The result of this is if you take a div with width/height = 100% nested inside of another div, with fixed size, if you apply zoom, everything inside your inner zoom will shrink, or grow, but if you apply transform your entire inner div will shrink (even though width/height is set to 100%, they are not going to be 100% after transformation).
For me this works to counter the difference between zoom and scale transform, adjust for the intended origin desired:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Use scale instead! After many researches and tests I have made this plugin to achieve it cross browser:
$.fn.scale = function(x) {
if(!$(this).filter(':visible').length && x!=1)return $(this);
if(!$(this).parent().hasClass('scaleContainer')){
$(this).wrap($('<div class="scaleContainer">').css('position','relative'));
$(this).data({
'originalWidth':$(this).width(),
'originalHeight':$(this).height()});
}
$(this).css({
'transform': 'scale('+x+')',
'-ms-transform': 'scale('+x+')',
'-moz-transform': 'scale('+x+')',
'-webkit-transform': 'scale('+x+')',
'transform-origin': 'right bottom',
'-ms-transform-origin': 'right bottom',
'-moz-transform-origin': 'right bottom',
'-webkit-transform-origin': 'right bottom',
'position': 'absolute',
'bottom': '0',
'right': '0',
});
if(x==1)
$(this).unwrap().css('position','static');else
$(this).parent()
.width($(this).data('originalWidth')*x)
.height($(this).data('originalHeight')*x);
return $(this);
};
usege:
$(selector).scale(0.5);
note:
It will create a wrapper with a class scaleContainer. Take care of that while styling content.
I would change zoom for transform in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-origin property to place the items where I wanted.
This worked for me in Chome, Safari and Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
zoom: 145%;
-moz-transform: scale(1.45);
use this to be on the safer side
Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).
Use:
html
{
font-size: 1mm; /* or your favorite unit */
}
and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.
if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).
for example:
#media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.
Don't use "rem" in media queries.
You really doesn't need zoom, but in some cases it can faster method for existing sites.
I've been swearing at this for a while. Zoom is definitely not the solution, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.
My solution that worked for me was using both a scaling and a translation, and also adding the original height and weight and then setting the height and weight of the div itself:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Obviously change these to your own needs. It gave me the same result in all browsers.
It does not work in uniform way in all browsers.
I went to to: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage and added style for zoom and -moz-transform. I ran the same code on firefox, IE and chrome and got 3 different results.
<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
try this code to zoom the whole page in fireFox
-moz-transform: scale(2);
if I am using this code, the whole page scaled with y and x scroll not properly zoom
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
Simply you can't zoom your page using css in fireFox
**
does this work correctly for you? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
For me this works well with IE10, Chrome, Firefox and Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
This zooms all content in to 50%.