Scale iframe Contents in IE 7 + 8 - css

I am trying to scale the contents of an iframe in all browsers including IE >= 7 but it doesnt work below 9.
I modified the code from this post for the dimensions I think I need and want to put a standard 960px wide page inside of it.
How can I scale the content of an iframe?
http://www.carsonfarmer.com/2012/08/cross-browser-iframe-scaling/
#wrap {
width: 410px;
height: 426px;
padding: 0;
overflow: hidden;
border:1px solid #ccc;
box-shadow: 0px 0px 3px #333;
}
#frame {
-ms-zoom: 0.5;
-ms-transform-origin: 0 0;
-moz-transform: scale(0.5);
-moz-transform-origin: 0px 50px;
-o-transform: scale(0.5);
-o-transform-origin: 0px 50px;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
#frame {
width: 950px;
height: 1000px;
border: 0;
overflow: hidden;
}
In IE 8 the content is too small for the container and I get some scrollbars.
In IE 7 the content is not scaled.
http://jsfiddle.net/t2GPm/

I can answer the question about why IE7 doesn't scale at all:
-ms-zoom: 0.5;
The above line will work in IE8 but not in IE7, because IE7 doesn't recognise the -ms- prefix. Prefixed styles were only introduced in IE8.
You can fix this in IE7 by specifying an un-prefixed version of the zoom style. However, this isn't the full answer because zoom is also supported by Chrome and Safari; you probably don't want to use it in these browsers, as you're using transform for them.
Yes, it's a complex issue. Given the above, your best options are to use conditional comments to make the zoom property specific to IE (there are various ways to achieve this).
The other option, of course, is simply to drop support for IE7. Frankly, this isn't a bad idea; it has a lot of major issues, and a rapidly decreasing number of users. (all the stats I've seen recently say it now has fewer users than IE6)
More generally, it's important to know that zoom is not the same as scaling using transform. zoom does not actually scale the element; it zooms it. The distinction is subtle but does make a difference, particularly with relation to the layout of elements around the box being zommed/scaled, and may explain the scroll-bar problems you're having in IE8.
Because of this, zoom may not actually be what you want to do. You're using it because old IE versions don't support transform, but there are other ways of getting old IE versions to scale an element. One option is to use the proprietary filter style. It's not pretty, but it might a better fit for what you're trying to do. Try this:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);
(above code taken from here)
Another option is to use a Javascript 'polyfill' library such as CSS Sandpaper. This library allows you to use standard CSS syntax for transform in old IE versions that don't don't support it. Under the hood, it uses the same filter style described above, but by giving you the ability to use standard code, it makes your CSS a lot neater.
Moving away from the original questions slightly, but while we're on the topic of vendor prefixes, I note that you haven't specified an unprefixed version of the transform style either. When using prefixed styles, it is important to also specify the unprefixed variant, so that it can be picked up by fully standards-compliant browsers, and because browsers that previously used a prefix may drop support for the prefix once the standard is well established.
Depending on version support you need, you may actually be able to drop some of the prefixed attributes already - firefox hasn't needed it since version 16 for transforms. You can see more info on this sort of thing at CanIUse.com.
Hope that helps.

Related

mix-blend-mode is broken by 3D transformations on page

I was fiddling with the mix-blend-mode property. Everything works fine until I add something like transform: perspective(100px) or any other 3d transformation anywhere on the page, then it breaks completely. The transformation is applied but the blend mode is gone.
I tested on chrome and firefox and on linux and windows and it's the same everywhere, however on a different computer it worked fine (I don't remember what version of chrome it had and was running ubuntu).
Is that something that can be fixed with CSS or is it possibly just a hardware / GPU drivers issue?
I put background-blend-mode in tags because the mix-blend-mode tag doesn't exist yet, however this property strangely works completely fine and isn't broken by transformations.
Here is a codepen of what I am trying to achieve:
http://codepen.io/vnenkpet/pen/avWvRg
The lightning shouldn't have it's black background flashing with it but should be blended smoothly with the page background.
EDIT:
I have just found out that it actually DOES work in Firefox. Is this therefore a chrome bug? 3D Transforms shouldn't break blend mode as far as I know...
I was having a similar issue, except that applying a mix-blend-mode (multiply) higher on the page broke my transforms lower on the page (using Chrome on Mac). I was able to fix this by applying a z-index rule to the mix-blend-mode div (don't forget to set a position, too).
I'm not entirely sure if this is a bug or if it is expected behavior due to the properties of stacking contexts, though.
You can try to also apply a null transform (3D layer promotion) to the element that has mix-blend-mode specified:
.content {
mix-blend-mode: difference;
transform: translate3d(0, 0, 0);
}
This way, Chrome can successfully blend the two 3D layers together, instead of failing to blend a 3D layer and a 2D layer.
Here's a snippet demonstrating the problem and the solution:
function change(event) {
var content = document.querySelector(".content")
content.className = event.target.checked ? "content content-with-transform" : "content"
}
.parent {
text-align: center;
padding: 2rem;
font-size: 5rem;
font-weight: 700;
}
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4rem;
background-color: #AB1795;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.content {
mix-blend-mode: difference;
background-color: #167CFB;
}
.content-with-transform {
transform: translate3d(0, 0, 0);
}
<div class="parent">
<div class="fixed"></div>
<div class="content">Content</div>
</div>
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>
(I stumbled onto this problem when using will-change: transform, not an actual transform, but the solution is the same.)
I realise this is a pretty old thread, but I was having the same issue with janky transforms in Webkit/Blink using the Masonry Isotope plugin with a mix-blend-mode overlay on the grid sections until I added the following CSS to the element that was being transformed. i.e. the masonry grid element
I'm answering this in case it helps someone in future.
[your-selector-goes-here] {
perspective:1000px;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}

Is the 'frosted glass' effect implementable with CSS only at this time?

The frosted glass effect (where an overlay both blurs and tints what is below it) is a common UI element in iOS.
Is there currently anyway to implement that with CSS? There are a lot of questions pertaining to this, but they are limited in what they can do. They typically are limited to putting an overlay over an image--rather than a completely rendered UI.
So, to be clear, I'm not looking for a way to blur an image by itself, but a way to blur the UI below an element. So say I have an HTML form with HTML buttons and HTML text, and I want to place a div above them all so that whatever is below looks blurred. And then I can perhaps scroll what is below and as elements come in and out of the overlay, they are blurred only while under the div.
My understanding is that the answer to this is no, this is not currently possible with CSS but I'm also a bit rusty on the new bells and whistles...
What you are looking for is backdrop-filter, which has been in webkit since August 2015 (see post). It was shipped in Safari 9 (September 30, 2015, part of OS X El Capitan) and works in Chrome today by enabling the Experimental Web Platform features [...] flag.
With backdrop-filter, getting the 'live blur' is as easy as adding backdrop-filter: blur(10px) to a given element.
Demo here.
It's probably going to be a while until it becomes mainstream though, but it's going to enable us to do so much more than the frosted glass effect (i.e. night mode, read more here).
The good news is that tons of people are excited about it, so let's hope we don't have to wait long. If curios, here's the spec for it.
If you want to track progress on this feature, check out:
Mozilla bug
Chrome bug & Chrome status
Microsoft bug
As far as I know, this is achievable only in Firefox.
The key is background-image: element. One of the properties that would prove most useful , in my opinion, of the ones in the "may be some day" list
Demo working only in FF .. Notice that frost is not a child or a parent of test
img {
margin-top: 5px;
margin-left: 40px;
animation: move 1s infinite;
}
#frost {
border: solid 1px blue;
width: 250px;
height: 250px;
position: absolute;
left: 50px;
top: 120px;
background-color: white;
background-image: linear-gradient(rgba(0,0,100,0.2), rgba(0,0,100,0.2)), -moz-element(#test);
background-position: -45px -112px;
background-repeat: repeat, no-repeat;
filter: blur(4px);
opacity: 1;
}
button:hover {
background-color: red;
}
#keyframes move {
from {transform: translate(0px);}
to {transform: translate(40px);}
}
<div id="test">
<button>BUTTON</button>
<img src="http://placekitten.com/1000/750" width="300px" height="300px"/>
</div>
<div id="frost"></div>

CSS-Rotated text in Webkit browsers is blurred

I've come across a severe problem I can't solve..
I created an accordion element with the jQuery Plugin easyAccordion.js. While I was developing and looked over it in Firefox it worked well - until I openend it in Chrome. There you can see that the rotated text is unclear and certainly blurred, even though it has the same formatting as the un-rotated text at the top. Same for Safari.
I created a jsfiddle that sortof recreates my issue (look at it in Chrome or Safari)
.
..
http://jsfiddle.net/SfKKv/427/
..
.
This is what I'm using to rotate the text:
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
The JSFiddle is not fully working in Firefox, but that's not important here, I have it working on the website I created it in, but even the sortof broken Fiddle in FIrefox shows that it can display the rotated text a lot better.
I've found some hints towards font-smoothing and some 3d Parameters, but none seemed to work for me.
Can anyone help me with this issue?
OK, so after trying out some uncommon things I've found a fix that is not 100% perfect/accurate but good enough for me.
Here's the updated JS Fiddle, again, use it in Chrome or Safari. Use the red Hover box to see the magic in action.
http://jsfiddle.net/SfKKv/627/
All I do is change the -webkit-transform-origin from its default value (50% 50%) to something close enough such as
-webkit-transform-origin: 50% 51%;
When you try out the fiddle, you'll see it moving by that one percent. However, that's still better than the blurred text.
I found this by pure trial and error and I still don't know why the text suddenly turns sharp. If someone can explain me this behavior, let me know!
I believe this has something to do with the way Chrome is rendering the transform. The best way to see what I'm going to talk about is by going to chrome://flags/ and enabling Composited render layer borders. Now, go to the fiddle with a fix that you posted. You'll notice an orange border around several elements on the page. This border is there because it shows these elements are given their own layer when being rendered on the page.
Start tweaking the widths of the dt elements in your <dl class="easy-accordion"> using the Chrome inspector tool. The text will become blurry/clear depending on whether the width is even/odd. What appears to be happening here is the layer is being composited to a half-pixel location which is then being rendered to create the appearance of being "between" two pixels.
This is also the issue with Safari (and WebKit in general).
Check out http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome for more info.
This problem occurs when a background color is not defined for IE versions 8 and 9 and maybe some versions of Chrome (I didn't see this issue in Chrome)
Adding background-color: white; (or any color you want) to your css rotate class solves the problem.
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
background-color: white; /* fix blurry text in ie8, 9 */
I had a similar issue, the problem was having perspective in body and the rotated div. It happened only in Safari on mac. Chrome worked fine.
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-family: 'Varela Round', sans-serif, Helvetica;
transform-style: preserve-3d;//bad
perspective: 1200px;//bad
-webkit-text-size-adjust: none
}
removing the perspective from body saved me! Indeed I used perspective twice, in body and in another rotated div, which probably caused a hard to kill pixelations, even SVG and text were pixelated.
transform-style: preserve-3d;
perspective: 1200px;
removing the above styles from body saved me.

DD Roundies not working in IE when element has gradient filter

I'm using DD roundies on a list element (li) that also has a filter applied for gradient and the rounded corners dont appear, but if I remove the gradient the rounded corners appear. Is there something I can do to fix this or is this a known limitation with roundies?
#hero-tabs li {
display:block;
float:left;
width:279px;
/*height:100px;*/
font-size:11px;
line-height: 1.3;
color:#fff;
border-left:1px solid #ccc;
cursor:pointer;
background-color:#555;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}
DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');
Thanks
I have ound this also and there appears to be no work around at present. You can have one or the other, not both.
IE applies the gradient filter to the original element so the rounded elements from dd_roundies don't cover it.
It's not a limitation with roundies, it's a limitation with filter gradients. This is proved by the fact that filter gradients also cause similar problems in IE9 with standard border-radius corners.
There is no easy work-around available; the best solution is simply not to use those filter gradients in older versions of IE; so IE8 and earlier would just a fall-back solid colour background.
IE9 does have a work-around, as it can use an SVG image with a gradient as the background embedded in the CSS as a data-URL. It's a bit clunky, but it does work. IE8 doesn't have this option though.
If you must use gradients in IE8, you're pretty much forced to stick with the filter styles, and live with the bugs.
There is one other option though -- CSS3Pie. This is a small JS library similar to DD_Roundies in that it adds border-radius support to old IE versions. But in addition, it also does gradients. My advice, therefore would be to use CSS3Pie instead of DD_Roundies, and it will deal with both issues for you at once.
Hope that helps.

How can I use rounded borders with CSS?

Is there a way in the newer CSS standards to provide round borders?
It is not possible in CSS level 2.
Yes. CSS3 already has it.
Many browsers already have it.
In Mozilla/gecko browsers you need -moz-border-radius though they are transitioning to border-radius.
In Safari/Chrome/webkit browsers you need -webkit-border-radius.
IE9 and above need border-radius (IE8 and below don't support it at all).
In the future when CSS3 is widely adopted you'll just need border-radius in all browsers.
At the moment it's a good idea to use all three, plus -o-border-radius if you're worried about Opera.
It's in CSS 3.
border-radius: 4em;
http://www.w3.org/TR/css3-background/#the-border-radius
Border-radius: create rounded corners with CSS!
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
The code for this example is, in theory, quite simple:
#example1 {
border-radius: 15px;
}
However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
What Thomas Rutter said, plus here is a handy resource because WebKit and Gecko use different properties for things such as top-left.

Resources