Note: There are similar questions (and may be outdated) which do not address the Firefox issue.
I'm using CSS3 to scale down an entire web page by 50%.
#media screen and (max-width: 320px) {
body {
-moz-transform: scale(0.5); /* Moz-browsers */
zoom: 0.5; /* Other non-webkit browsers */
}
}
This works fine in Chrome but Firefox scales it down seemingly 2 times horizontally and vertically.
Is there a new cross-browser solution for properly scaling down?
Cross browser CSS should look like this (IE from ver. 9)
The code is tested in FF 45.0.1 and works fine.
body {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
div {
width: 50vw;
height: 50vh;
background: red;
font-size: 40px;
}
<div>
Hello world - font size 40px
</div>
Related
I have a problem with scaling down content in iFrames. When applying CSS transform:scale on an iframe, the content appears crispy. (not antialiasing text and images)
Here is a codepen I created as example:
<iframe id="desktop" src="https://en.wikipedia.org/wiki/Responsive_web_design" scrolling="no"></iframe>
iframe {
width: 1600px;
height: 992px;
transform: scale(0.4181);
-webkit-transform: scale(0.3181);
-o-transform: scale(0.3181);
-ms-transform: scale(0.3181);
-moz-transform: scale(0.3181);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
}
https://codepen.io/front-end-developer/pen/gEPvKv
Applying transform(scale) on an iframe, the content in the iframe is not antialiased. Is there another CSS solution to scale down iframe content with antialiasing enabled?
Here is the full demo to create a responsive mockup
How to bootstrap a site with horizontal CSS only parallax effect?
Requirements
CSS only parallax
parent layer must have width/height == 100vw/100vh
child layers must have width/height > 100vw/100vh
child layers must visually align 100% with parent layers width
by now the child layers technically do have 100% of parents width but due to the perspective they visually don't appear to take 100% of parents width
child layers (except the first) must have a top offset relative to its parent
results must base on calculations to have maximum flexibility
must be cross browser solid (at least newest version of majors)
What I have done so far
Actually this question is a follow-up question.
Here's a PEN with my current mockup state in SASS or CSS.
Working Simulated Example (jQuery)
In JavaScript its quite simple to achieve what I'm looking for. So here is a PEN that simulates the effect I'd like to mimic with CSS.
Already known Issues
The issue I'm most concerned about by now is the fact, that browser seem to render this scenario differently. See screenshot of browser window (chrome vs ff) scrolled to the right bottom corner below. But I hope this could be avoided.
There are so many parallax tutorials out there. Why is this different?
Actually I researched really a lot but didn't find not even one description how to implement horizontal parallax (means the child layers have a width > 100vw). Of course there are horizontal parallax scroll tuts out there. But they all have one in common: the child layer widths are always <= 100vw - and thats actually the difference.
html,
body {
height: 100%;
overflow: hidden;
width: 100%;
}
body {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#projection {
-webkit-perspective: 1px;
perspective: 1px;
-webkit-perspective-origin: 0 0;
perspective-origin: 0 0;
height: 100%;
overflow: auto;
width: 100%;
}
.pro {
-webkit-transform: scale(1) translate(0px, 0px) translateZ(0px);
transform: scale(1) translate(0px, 0px) translateZ(0px);
height: 100%;
position: absolute;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
.pro--1 {
-webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px);
transform: scale(4) translate(0px, 0px) translateZ(-3px);
width: 110%;
}
.pro--2 {
-webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px);
transform: scale(3) translate(0px, 1em) translateZ(-2px);
width: 110%;
}
.pro--3 {
-webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px);
transform: scale(2) translate(0px, 2em) translateZ(-1px);
width: 110%;
}
.pro {
background: rgba(0, 0, 0, 0.33);
box-shadow: inset 0 0 0 5px orange;
color: orange;
font-size: 4em;
line-height: 1em;
text-align: center;
}
.pro--2 {
box-shadow: inset 0 0 0 5px green;
color: green;
}
.pro--3 {
box-shadow: inset 0 0 0 5px blue;
color: blue;
}
<div id="projection">
<div class="pro pro--1">pro--1</div>
<div class="pro pro--2">pro--2</div>
<div class="pro pro--3">pro--3</div>
</div>
I'm not 100% certain I've gotten exactly what you're targeting, but I've at least got a step forward for you. In this article on pure-css parallax sites, there was an update regarding working around webkit related bugs by using perspective-origin-x: 100% and transform-origin-x: 100%.
If I apply this in both x and y directions to your current mockup case with sass, I end up changing just #projection and .pro to be like this:
#projection
perspective: $perspective + 0px
perspective-origin: 100% 100%
height: 100%
overflow: auto
width: 100%
.pro
#include projection()
height: 100%
position: absolute
transform-origin: 100% 100%
transform-style: preserve-3d
width: 100%
And the parallax behavior starts to look much more like I might expect. Here is the final pen: https://codepen.io/kball/pen/qPbPWa/?editors=0100
I need a line and should have an option to change the angle. The transform property works well but when the angle is increased the line size is decreased.
I need to retain the line size and should not be affected.
https://jsfiddle.net/4j8n45zz/
div {
width: 5px;
height: 220px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
<div></div>
The default transform-origin of the transformation is set on the middle of your <div>. So if you increase the angle the <div> will be rotate on the mid point and a part of your line is outside the site. To solve this you have to set the transform-origin to a corner ([top, bottom] [right, left]).
See the following example (https://jsfiddle.net/4j8n45zz/1/):
div {
display:block;
width:5px;
height: 220px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
}
<div></div>
I'm trying to make a full width rotated header but the problem is that when I rotate it in the right corner of the header it has a space. I've made a jsfiddle to understand my problem better. I'm trying hours and hours many methods but nothing worked. Thank you
#header {
background: rgba(255,0,0,0.7);
height: 150px;
transform: rotate(356deg) ;
-webkit-transform: rotate(356deg) ;
-moz-transform: rotate(356deg) ;
-o-transform: rotate(356deg) ;
-ms-transform: rotate(356deg) ;
-webkit-transform-origin: bottom left;}
http://jsfiddle.net/SAVw6/
I believe that this is what you want:
Fiddle: http://jsfiddle.net/SAVw6/5/
HTML:
<div id="container"><div id="header"></div><div>
CSS:
#header {
background: rgba(255,0,0,0.7);
height: 150px;
transform: rotate(356deg) ;
-webkit-transform: rotate(356deg) ;
-moz-transform: rotate(356deg) ;
-o-transform: rotate(356deg) ;
-ms-transform: rotate(356deg) ;
-webkit-transform-origin: bottom left;
width: 130%;
margin-left: -20%;
}
#container {
overflow: hidden;
width: 100%;
}
The container prevents any excess horizontal scrolling
The width is extended above 100% in order for it to continue on to the right and left.
The margin-left is set to negative in order for it to continue to the left instead of only to the right.
Your -webkit-transform-origin: bottom left; CSS code is specifically targeting Chrome and no other browsers. For cross-browser support, you can use:
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
I am trying to create a page layout with a rectangular div on the left side that's rotated 10 degrees, expands with the size of the browser, and doesn't show its edge on the top, left, and bottom. Meaning, the page should appear to be split in the middle on a slant.
My code so far creates the div properly, but when I expand the page you begin to see the edges.
http://jsfiddle.net/jpQvL/1/
HTML
<div id="wrapper">
<div id="right"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
position:relative;
height: 100%;
}
#right {
background: #000;
transition: all 0.5s ease-in-out 0s;
width: 50%;
position: fixed;
min-height: 110%;
transform: rotate(10deg);
top: -73px;
}
The problem is that the tranform property needs render prefixes. You have to add these lines:
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
take a look at this
or use one of many prefix-free scripts like this one