Css: Problems When Using Object-Fit and Transform Together on Webkit

CSS: Problems when using object-fit and transform together on webkit

After testing it seems that backface-visibility, translateZ, and translate3d which are required to prevent the transform flicker, break object-fit and background-size. If your goal is to center the image then you can use position: absolute and translate like in the example below.

div.category {    width: 80%;    height: 150px;    margin: 20px;    position: relative;    overflow: hidden;}img {    display: block;    width: 100%;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%) scale(1.12); /* order is important here*/    backface-visibility: hidden;    transition: transform 0.35s;}div.category:hover img {    transform: translate(-50%, -50%) scale(1);}

<div>    <div class="category">        <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />    </div>    <div class="category">        <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />    </div>    <div class="category">        <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />    </div></div>

Hover Zoom Effect While Using Object-Fit: Cover

object-fit:cover isn't widely supported and I'm not very familiar with it, I don't know if you are required to use it but I tried something I am more familiar with.

If all the images are 'landscape' then you can use width: 100% and height: auto and the CSS will maintain the aspect ratio for you. To position the images centered in the container I applied position: relative to the container and position: absolute to #content. See: https://css-tricks.com/almanac/properties/p/position/

For the zoom you can just use #content:hover { ... } in your CSS (unless you need jQuery for other purposes).

HTML:

<div id="imageDiv">
    <img id="content" src="http://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png" />
</div>

CSS:

#content:hover {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.6); 
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.6);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.6);
    transform: translateX(-50%) translateY(-50%) scale(1.6);
}

#content {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#imageDiv { 
    position: relative;
    height: 250px;
    width: 450px;
    overflow: hidden;
}

FIDDLE (sans js): http://jsfiddle.net/pqs4vef7/2/

How to fix this bug: border-image with transform will have lines

Change img base64 data to svg，now it work fine

Positions fixed doesn't work when using -webkit-transform

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.

EDIT: As of 10/24/2012 the bug has not been resolved.

---

This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.

css z-index lost after webkit transform translate3d

This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824

Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.

CSS3 transform not working

This is merely an educated guess without seeing the rest of your HTML/CSS:

Have you applied display: block or display: inline-block to li a? If not, try it.

Otherwise, try applying the CSS3 transform rules to li instead.

How to apply multiple transforms in CSS?

You have to put them on one line like this:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

When you have multiple transform directives, only the last one will be applied. It's like any other CSS rule.

---

Keep in mind multiple transform one line directives are applied from right to left.

This: transform: scale(1,1.5) rotate(90deg);
and: transform: rotate(90deg) scale(1,1.5);

will not produce the same result:

.orderOne, .orderTwo {  font-family: sans-serif;  font-size: 22px;  color: #000;  display: inline-block;}
.orderOne {  transform: scale(1, 1.5) rotate(90deg);}
.orderTwo {  transform: rotate(90deg) scale(1, 1.5);}

<div class="orderOne">  A</div>
<div class="orderTwo">  A</div>

CSS Transform with element resizing

The problem I noticed is that when element scales, browser change its pixels ratio, not pixels amount. Element is smaller but it doesn't change its actual pixel size in DOM. Because of that I don't think that CSS-only solution exist.

I put scalable element into container which keeps the same pixel ratio as rest of elements. Using Java Script I simply change container's size. Everything is still based on CSS3 transform: scale. Maybe JS code could be simplier, but now it's all about the idea (just a proof of concept);) Fiddle with two examples: http://jsfiddle.net/qA5Tb/9/

HTML:

<div class="overall-scalable">
    <div class="scalable" scalex='0.5' scaley='0.5'>
        Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium. Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium.
    </div>
</div>

CSS:

.overall-scalable {width: 350px; height: 150px; overflow: hidden; -webkit-transition: all 1s;}
.scalable {color: #666; width: 350px; height: 150px; -webkit-transform-origin: top left; -webkit-transition: all 1s;}

JS:

$('button').click(function() {
    $('.scalable').each(function(){
        rescale($(this));
    })
});

function rescale(elem) {

    var height = parseInt(elem.css('height'));
    var width = parseInt(elem.css('width'));
    var scalex = parseFloat(elem.attr('scalex'));
    var scaley = parseFloat(elem.attr('scaley'));

    if (!elem.hasClass('rescaled')){
        var ratioX = scalex;
        var ratioY = scaley;
    }else{          
        var ratioX = 1;
        var ratioY = 1;
    }

    elem.toggleClass('rescaled');
    elem.css('-webkit-transform', 'scale('+ratioX +', '+ratioY+')');        
    elem.parent().css('width', parseInt(width*ratioX) + 'px');
    elem.parent().css('height', parseInt(height*ratioY) + 'px');
}​

---

Related Topics