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
Related
I am using the below code for iframe on my website.
.callrates {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: scroll !important;
-webkit-overflow-scrolling:touch !important;
height:500px;
}
.callrates iframe {
position: relative;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="callrates">
<iframe src="https://www.xyz.php" width="200px" height="0" allowfullscreen=" " frameborder="0" scroll="no"></iframe>
</div>
The problem is when I view it from a mobile device in portrait orientation the width of iframe is more than the screen size and therefore makes it scroll horizontally as well as vertically. I want the full width to fit in the screen. How do I do this?
Checkout this codepen: http://codepen.io/anon/pen/YpZgYm
<iframe src="https://www.xyz.php" width="" height="0" allowfullscreen=" " frameborder="0" scroll="no">
Update:
May not be the most elegant solution but you can zoom out the iframe content if making the iframe source page responsive isn't an option.
Try adding
iframe{
-ms-zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
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>
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
This should be a very simple problem you would think. I have a box with some title text that I want to rotate -90 degrees. I would like it to be absolutely positioned so that the end of the word is nudged into the top left corner. I can get this to align to the bottom easily enough, but the problem is that with variable length text it seems impossible to have it consistently stay within the container when aligning to the top because things like {top: 0} operate on the title before the transform. For my purposes this only needs work in Firefox. I can use javascript if that is the only solution, but you would think this could be done with just CSS.
You should use transform-origin to adjust the transformation point, along with some creative use of positioning properties.
http://jsfiddle.net/thirtydot/JxEfs/1/
CSS:
#box {
padding: 30px;
position: relative;
border: 1px solid blue;
}
#box > div {
border: 1px solid red;
position: absolute;
top: 0;
right: 100%;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: right top;
-moz-transform: rotate(270deg);
-moz-transform-origin: right top;
-ms-transform: rotate(270deg);
-ms-transform-origin: right top;
-o-transform: rotate(270deg);
-o-transform-origin: right top;
transform: rotate(270deg);
transform-origin: right top;
}
HTML:
<div id="box">
hello
<div>rotated!</div>
</div>
Can also work without right:100%
Just rotate 270 deg around left top and then translate it back at new 100% width.
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
http://jsfiddle.net/zW7SP/