What the problem is
I have tested this scenario of perspective usage ( a w3C validated webpage with all necessary and optional CSS browser tags) in IE, Firefox, Chrome, and Opera and found different (all inaccurate) results. So far it appears that the web browsers have all implemented perspective with slightly different displays. This question is here to see if maybe I'm missing something and there is a cross browser solution available.
If no one has a solution, well then, we have an interesting situation. Before now, I've never seen a feature in CSS that acts noticeably and irreparably inaccurate between all browsers.
I hope I'm wrong, because if not, I have to create and maintain three separate style sheets via php or javascript browser checking, a method that is very clearly out of date and frowned upon in today's web design. We prefer to use Modernizr to check features rather than browsers now, but this situation would prove that solution inviable.
Example Situation:
In Chrome, I positioned an iPhone interface simulating the use of a particular home automation app on the phone to control the channel of the tv in the background (an actual video), where the tv and iphone are made to look like they are part of the image with perspective and transform.
However, when looking at this from Firefox, the elements are completely out of place, as you can see below.
Question:
Is there any cross browser solution that will allow me to produce this result without using separate style sheets for different browsers?
Live JS Fiddle:
http://jsfiddle.net/qZSYy/1/
Purpose:
I'm developing a website for a technology company, and one of the main services provided is home automation. With a remote, or an iPhone or iPad, you can control a home's lighting, music, tv, etc. Very cool. So, I've decided to develop a section of the home automation page that simulates this.
On Chrome, it looks like this right now:
On Firefox:
Notes:
The iphone screen is actually a separate element, that turns on when hovered over and remains lit up for 10 seconds. I'm designing an interface on the iphone that will control the room's different lights, the speakers, and the tv, which is actually a separate div also that can be controlled by the iPhone as well to change channels.
The background is an image that I've render through Blender and can render different versions for the lighting changes.
CSS:
.home-auto-interactive {
width: 1250px;
height: 700px;
background-color: gray;
background-image: url('http://www.testing.agcomputers.net/style/images/Room_1.jpg');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
overflow: hidden;
-webkit-perspective: 80;
margin-left: auto;
margin-right: auto;
}
.home-auto-wrap {
width: 100%;
background-color: #252525;
}
.tv-screen {
width: 8.12%;
height: 7.8%;
position: absolute;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
-ms-transition: -ms-transform .5s;
transition: transform .5s;
-webkit-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-moz-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-o-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
-ms-transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
transform: rotateY(-2deg) rotateX(0deg) rotateZ(0deg) translateX(626.7%) translateY(490%);
}
.iphone-screen {
width: 22.7%;
background-color: black;
background-image: url('http://www.testing.agcomputers.net/style/images/iphone_screen_test.jpg');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
height: 50.8%;
bottom: 12.7%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
-webkit-transition-delay: 10s !important;
-moz-transition-delay: 10s !important;
-o-transition-delay: 10s !important;
-ms-transition-delay: 10s !important;
transition-delay: 10s !important;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
transition: opacity 0.5s;
-webkit-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-moz-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-o-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
-ms-transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
transform: rotateY(-0.75deg) rotateX(1deg) rotateZ(-3deg) translateX(18.5%) translateY(0%);
}
.iphone-screen:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
-o-transition-delay: 0s !important;
-ms-transition-delay: 0s !important;
transition-delay: 0s !important;
}
HTML:
<div class="home-auto-wrap">
<div class="home-auto-interactive"><!-- begin home auto interactive :: this has the purpose of displaying an interactive home automation area -->
<div class="tv-screen"><!-- begin tv screen -->
<iframe width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div><!-- end tv screen -->
<div class="iphone-screen"><!-- begin iphone screen -->
</div><!-- end iphone screen -->
</div><!-- end home auto interactive -->
</div>
You are missing the transform-style: preserve-3d; on the parent element. Also place the perspective property here, more on that later:
.home-auto-wrap {
width: 100%;
background-color: #252525;
transform-style: preserve-3d;
perspective: 80px;
}
This is part of the problem as Firefox requires it, Chrome does not - this explains why it works there. The next issue with Firefox is that overflow: hidden set on .home-auto-interactive causes all descendant elements to be flattened according to the spec: W3C Transform-style.
A workaround for this is to place the divs .tv-screen and .iphone-screen after .home-auto-interactive and position them atop. Now the 2 divs you are transforming will not be impeded.
Also opacity other than 1 will cause any descendant elements to flatten in 3D transforms, so be careful to keep that property for a div in the body with no transforming children (use z-index to position elements behind or in front of said div), or on the last node of a transforming element itself.
The background image property is not animatable, so you need to use an image tag to pull this off.
The issues you cite with TV could be due to:
The iframe, try applying the class to the iframe, though it should work as is.
The extra 0 transforms, get rid of these regardless.
The whole overflow thing, check the link above if you haven't done so.
Also, the filter property set other than none can lead to the same issue as the overflow and opacity, once again as per spec. It is not needed since IE 9, so unless you have some fallback reasons for doing so, removal is a good thing to consider. The opacity property has the same or better support than the 3D transforms:
Can I use opacity, check the 3d transforms too, I can't post more links yet. While you are at that page, check out the HTML5 video tag, it also has browser support as good as the 3d tranforms.
It looks like you need another prefix. Anywhere you call -webkit-perspective, you also need to call -moz-perspective. And the perspective needs a value: ems, px, etc..
https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
http://css-tricks.com/almanac/properties/p/perspective/
This gave the elements perspective, but when you use position:absolute;, you need to also give a parent a defined position like position:relative;.
http://jsfiddle.net/NyXSa/7/
.home-auto-interactive {
width: 1250px;
height: 700px;
background-color: gray;
background-image: url('http://www.testing.agcomputers.net/style/images/Room_1.jpg');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
overflow: hidden;
-webkit-perspective: 80px;
-moz-perspective: 80px;
perspective: 80px;
margin-left: auto;
margin-right: auto;
position:relative;
}
Related
I'm doing a hover effect that increases the images brightness and scales the image on hover state. For some reason the transform seems to choppy with the CSS filter. Any idea why this makes the transform choppy? Seems to be working smoothy on Safari and Firefox.
Basically I'm doing this:
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate(0px, 0);
filter: brightness(80%)
&:hover
transform: scale(1.1)
See full demo here: http://codepen.io/tzzo/pen/MmKeVm
Thanks.
Just had a look at the codepen on Chrome 56 and it's really smooth for me. However, if you want to increase the image brightness on hover you need to add the filter to the hover too:
img:hover {
-webkit-filter: brightness(100%)
filter: brightness(100%)
}
use this code in hover proerties-
.parent img:hover {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 1.0; filter: brightness(150%);}
I can't see the issue on my machine but I have had this problem at other times
You could try triggering hardware acceleration on the element by adding transform3d
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate3d(0,0,0)
filter: brightness(80%)
&:hover
transform: scale(1.1) translate3d(0,0,0)
Note you need to re-apply the translate when you alter the transform in the hover rule
I came up with a lightweight and well supported implementation.
I ditched CSS filters and decided to use opacity instead. If the background of the image doesn't work well with the you have to set it separately.
img
background-color: black
opacity: 0.8
transition: all 3s ease-in-out
&:hover
opacity: 1
transform: scale(1.1)
Added working solution to my pen: http://codepen.io/tzzo/pen/MmKeVm
I have a sqare image wich is turned into a circle by using border-radius: 50%; That works quite well so far. ;) But the next step is difficult to do: I want the image to zoom "nearer" by using transform: scale. I mean: I dont want to change the same size of the image, it should stay with the same diameter. But I want to show a small section of the image. The zooming should be activated on :hover and it should be processed during a period of 0.8s
My code works perfectly in Firefox, but in Chrome and Safari it does not. Where are my mistakes?
My HTML:
<div class="hopp_circle_img">
<img src="... alt="" />
</div>
My CSS:
.hopp_circle_img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.hopp_circle_img img {
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
}
.hopp_circle_img img:hover {
display: block;
z-index: 100;
transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
}
The problems:
1) Chrome: The "zoom" works, but during the transition-time (o,8s) the image has sqare borders. After the trasition took place, they are rounded.
2) Safari:
The transition-time is ignored, transition takes place immediately, without "soft" zooming.
3) IE: I did not dare to take a look at IE, if it does not even work in Safari and Chrome. ;)
Thanks for your ideas. I tried many different things, none of them worked.
Raphael
With Harry's suggestion to fix the square, this one should work in Safari as well.
First, prefixed properties should be before unprefixed, second, don't use all as in
transition: all ...
name the properties to be transitioned, in this case
transition: transform 0.8s
Note, you need to add back the rest of the prefixed properties
.hopp_circle_img {
position: relative; /* new property added */
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: 0; /* new property added */
}
.hopp_circle_img img {
-webkit-transition: transform 0.8s; /* re-ordered property, named */
transition: transform 0.8s; /* what to be transitioned */
}
.hopp_circle_img img:hover {
display: block;
z-index: 100;
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
<div class="hopp_circle_img">
<img src="http://lorempixel.com/400/400/nature/1" alt="" />
</div>
OK, I have a first success:
Changing .hopp_circle_img img:hover into .hopp_circle_img:hover fixed the problem in Safari. But it still remains in Chrome.
What fixed this issue for me was:
.hopp_circle_img {
transform: scale(.99);
}
I've been trying for days to emulate a video editing effect using CSS3 with no luck. I have two background images (one on top of the other) and want to create an animation where I scale up or zoom the image on top while leaving the background image intact.
I have been able to successfully change the position of the top image while leaving the background intact, and I can also do an animation which scales both foreground and background images at the same time.
Here's some code to make this all a bit more clear:
My HTML:
<section id="about-photo" class = "light-bg img-bg" style = "background-image: url({% static "assets/images/art/cocuy-foreground.png" %}), url({% static "assets/images/art/cocuy-background.jpg" %});">
<div class="container inner">
<div class="row">
</div><!-- /.row -->
</div><!-- /.container -->
</section>
My CSS (only including webkit for sake of brevity)
#-webkit-keyframes hide {
from { background-position: 0px 0px, 0px 0px; }
to { background-position: 0px 300px, 0px 0px; }
}
#-webkit-keyframes zoom {
from {-webkit-transform: scale(1,1), scale(1,1) ;}
to {-webkit-transform: scale(2,2), scale(1,1) ;}
}
#about-photo {
background-repeat: no-repeat;
-webkit-animation-name: zoom;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
When I apply the animation called "hide" things work fine, but when I use "zoom" nothing happens.
Any ideas/tips would be greatly appreciated!
Dennis
Not sure if you actually need to use keyframes for this. You can simply use transition and transform to achieve this. I made a jsFiddle showing how you can do that. Also be aware that you want to include other vendor prefixes so your code works in all browsers.
#about-photo {
position: relative;
}
.light-bg {
width: 1000px;
height: 1000px;
background: url('http://www.broomehovercraft.com.au/graphics/bht/popups/gallery-sunset-6.jpg');
background-repeat: no-repeat;
}
.smiley {
position: absolute;
top: 10%;
left: 20%;
width: 100px;
height: 100px;
z-index: 2;
background: url('http://www.wpclipart.com/smiley/assorted_smiley/assorted_3/smiley_a_bit_angry_T.png');
background-size: 100px 100px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.smiley:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
<section id="about-photo" class="light-bg img-bg">
<div class="smiley"></div>
<!-- /.container -->
</section>
http://jsfiddle.net/augburto/44sbrooy/
The main thing to note is that on the element you wish to have a "zoom effect", you want to apply a transition so it knows that when a transform is applied to it, it will do it smoothly (if you don't have this, then it will do the action immediately.
Right now I have it so when you hover over the smiley, it will scale with a transform. However, you can easily change this to a class that you can apply. As long as your element has a transition, it will create that nice "zoom-in" effect. Then the actual scaling of the image can be applied to a separate class which you can apply whenever.
For more documentation on transitions, check out MDN.
If you really want to use keyframes, then update your question, but in my eyes it isn't necessary in this situation.
I have a problem in latest Firefox browser version 34 (system: Windows 7, screen width: 1600px). I made effect with zooming images (in some container) after hover on it. I am using transform: scale(1.1) with transition: transform 0.3s ease-in-out. But when I hover on image, and after image zoom in.. it make some strange 1px-shifting. Some rendering browser bug, but I hope that existing some fix for it.
Most important CSS definition and part of HTML code:
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
</figure>
Sample with bug is online here: http://templates.silversite.pl/test/jumpingimg/
I saw also that somebody can fix it, but I do not know how, e.g. box "Our recent work" on http://demo.qodeinteractive.com/bridge/
I had a similar problem on my project. All images were position: absolute; and the transform look like that:
figure img{
transform: translate( -50%, 50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale(1.1);
}
I replace every scale with scale3d and that solved my problem.
The final styles look like that:
figure img{
transform: translate( -50%, 50%) scale3d(1, 1, 1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}
Hope that's will fix your problem
On the link that you provided, http://demo.qodeinteractive.com/bridge/ , if you actually go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you can see that, once looking at dev tools, that they apply a margin of "1px" on left/right side
.projects_holder.hover_text.no_space article .image img {
margin: 0 1px;
}
If you disable that style, you'll see the image move as you're describing when hovering on the image.
Therefore, your CSS for the image should be:
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
display: block; /* (or inline-block) */
margin: 0 1px;
}
I have just run into this same problem now. The solutions here didn't fix the issue, so I'm posting what I did to get this to work.
Like OP I had a container with oveflow hidden and was the same size as the image inside it. The image would scale on hover to create a 'zoom' effect - but when initially starting and ending the transition, the image was "jumping"/growing a tiny bit on the bottom and right-hand side. This made it jumpy and not smooth.
I had calculated the dimensions of my components based off of percentages, which caused them to be non-integers (Chrome). I have a feeling Scale & Scale3d round the pixel values when scaling, which caused this jump. I gave a parent container display:table, which caused all children to have their width/heights be rounded to be an integer value. This fixed the issue for me, and the images now scale smoothly!
7,5 years later it's still an issue and the now solution is will-change css property. Only IE won't get this, but others seems to be doing fine - no more px jumping (edit: on non retina screens).
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
will-change: transform;
}
I just run over the same issue and for me it looks like that the browser corrects the decimal pixel after the scaling is done. Or some how the height and the width doesn't get scaled equals and that gets corrected in the end.
So I think the solution is to use an image with a 1 x 1 ration factor.
So for me the code of the question works fine when I use a the lorempixel with a width and height of 400px.
Let me know if that solves the issue?!
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
</figure>
I am showing a modal popup using CSS3 transitions (largely borrowed from Effeckt.css). It works well in all modern browsers except Safari. In Safari, the movement is OK, but the background-color snaps in unevenly.
This is the code, the problem is visible in Safari on OSX: http://jsfiddle.net/eJsZx/4/
A screenshot of the problem before it resolves itself. You can see that half the div is correctly colored white, half is still transparent.
This is the relevant part of the CSS (.effeckt-show and .md-effect-8 are applied when the button is clicked, to show the modal):
.effeckt-modal {
visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
background: white;
}
.md-effect-8 {
-webkit-perspective: 1300px;
-ms-perspective: 1300px;
-o-perspective: 1300px;
perspective: 1300px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.md-effect-8 .effeckt-modal {
-webkit-transform: rotateY(-70deg);
-ms-transform: rotateY(-70deg);
-o-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
opacity: 0;
}
.effeckt-show.md-effect-8 .effeckt-modal {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
As far as I can tell it's a bug, yes, Safari is rendering intersection where it shouldn't.
For some time I thought Safari is doing it right by always rendering intersection of elements, but as far as I understand the specs, only elements in the same 3d rendering context should intersect, and that would be children of elements with a transform-style of preserve-3d.
So far the only workaround I found (only tested on Windows yet where Safari shows the same behaviour) is to translate the underlying elements away on the z-axis. Without perspective being applied it won't actually translate, but Safari/Webkit seems to think it does (which probably is because it mistakenly treats the element as if it were in the same 3d rendering context as the actually transformed dialog) and so the elements do no longer intersect.
.effeckt-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: 500ms;
-o-transition: 500ms;
transition: 500ms;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
-webkit-transform: translateZ(-1000px);
}
http://jsfiddle.net/eJsZx/5/
I found this issue when trying to find a solution to a problem I was experiencing in Safari (Mac and iOS), where a y-rotated svg only displayed its right half for no apparent reason.
In my case, the svg was a child of a fixed-position div, and I found that both position: fixed and position: absolute on the parent caused half the svg to disappear.
Neither changing z indexes, perspective, nor translate-z seemed to solve the issue. But randomly, adding a new div around my svg and setting its background-color solved the problem. I hope this helps the next person :)
In my case, adding z-index: 0 to the parent element fixed it as per Thomas's suggestion.
None of the solutions above worked for me. In the end, this is a bug with rotate on Safari that Chrome previously had but fixed. The answer here was what solved it for me - using scale() rather than rotate().
In my case, it worked to put transform: translateZ(0); on the parent container. The object itself is an image.