Can object-fit be preserved while applying a CSS transform?

Question

Can object-fit be preserved while applying a CSS transform?

Currently, I am developing a component that involves transitioning an image from a specific starting position and scale to an end position and scale in order to fill the screen. This transition is achieved through a CSS transform animation on translate and scale properties.

An issue that has arisen is that certain images being transitioned may have been altered by users of the component using the object-fit property. It seems that the CSS translate does not maintain the object-fit property during the transition.

To view a demonstration of this issue, please visit: https://codepen.io/cathyxz/pen/mXgEMB

While I could animate width and height instead, I prefer to stick with properties that browsers can animate efficiently for performance reasons. This means avoiding properties that affect layout, leaving us with only position, rotation, scale, and opacity as viable options for animation.

If you're interested in learning more about high-performance animations, check out: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

I am seeking a solution to gradually animate the transition to "uncrop" images without stretching them. Any advice or suggestions would be greatly appreciated!

javascript css css-animations css-transforms

Answer 1

Answer №1

object-fit is implemented on the element prior to any transformation taking place.

Regardless of the effects of CSS styling on the object, transform steps in and applies the necessary changes. Interestingly, the element remains untouched in the DOM structure. This is why a repaint is not triggered by transform, making it efficient in terms of performance. The only thing that changes is its rendering (the composite layer) which is stretched 4 times along the X axis due to the transform. However, this does not alter the size of the element by fourfold, hence object-fit does not function as anticipated.

Is there a way to gradually uncrop the image? Yes, but not using transform. To achieve this in a cost-effective manner (without causing a repaint within subsequent flow), you will need:

A parent placeholder (with position:relative) set to the height of the image, maintaining space in the document flow.
The element being animated should have position:absolute. By doing so, even if you animate the width, layout won't be affected because the element is outside the document flow.

.transform-placeholder {
  height: 100px;
  position: relative;
}

.transform-placeholder .object-fit {
  width: 100px;
  height: 100px; 
  animation: object-fit 2.1s infinite;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  
}

@keyframes object-fit {
  0% {
    width: 100px;
  }
  50% {
    width: 400px;
  }
  100% {
    width: 100px;
  }
}

<div class="transform-placeholder">
  <div class="object-fit" style="background-image: url('https://picsum.photos/1600/400?image=857')">
  </div>
</div>

<h2>The animation above ensures no repaint occurs on any DOM elements outside of the animated div.</h2>

Answer 2

object-fit is implemented on the element prior to any transformation taking place.

Regardless of the effects of CSS styling on the object, transform steps in and applies the necessary changes. Interestingly, the element remains untouched in the DOM structure. This is why a repaint is not triggered by transform, making it efficient in terms of performance. The only thing that changes is its rendering (the composite layer) which is stretched 4 times along the X axis due to the transform. However, this does not alter the size of the element by fourfold, hence object-fit does not function as anticipated.

Is there a way to gradually uncrop the image? Yes, but not using transform. To achieve this in a cost-effective manner (without causing a repaint within subsequent flow), you will need:

A parent placeholder (with position:relative) set to the height of the image, maintaining space in the document flow.
The element being animated should have position:absolute. By doing so, even if you animate the width, layout won't be affected because the element is outside the document flow.

.transform-placeholder {
  height: 100px;
  position: relative;
}

.transform-placeholder .object-fit {
  width: 100px;
  height: 100px; 
  animation: object-fit 2.1s infinite;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  
}

@keyframes object-fit {
  0% {
    width: 100px;
  }
  50% {
    width: 400px;
  }
  100% {
    width: 100px;
  }
}

<div class="transform-placeholder">
  <div class="object-fit" style="background-image: url('https://picsum.photos/1600/400?image=857')">
  </div>
</div>

<h2>The animation above ensures no repaint occurs on any DOM elements outside of the animated div.</h2>

Can object-fit be preserved while applying a CSS transform?

Answer №1

Similar questions

What is the best way to enhance a tool-tip with images or legends?

What is the best way to utilize regex for replacing a string within Node.js environment?

Can state be controlled by both the parent and children within the same element?

The max-width CSS property is failing to function properly on a specific DIV element

Optimizing Angular's ng-repeat for efficient updates by restricting the watch functionality to the relevant iteration

Eliminate the unnecessary code repetition in my functions using Typescript

Are there other options besides Chrome Frame for enhancing Raphael performance on Internet Explorer?

Turn off automatic calling of Javascript function via the menu

Display a different div when hovering over an li element

Creating a Stylish ExtJS Container with CSS: A Step-By-Step

Error: Unable to locate the reference

Looking to retrieve the key value or iteration of a specific item within an Angular UI tree?

What is the best way to customize the cursor for each individual div?

Implementing basic functionality with React Router

Replacing text within nested elements

What could be causing my directive to not display my scope?

The TypeScript function was anticipating one argument, however it received two instead

How can I retrieve the value of a JavaScript variable using Ajax?

CSS Only flyout navigation - reveal/hide with a tap or click

Is it true that Redux Saga's select function returns mutable state?