Separating the painted area from the layout of images · Issue #120 · WICG/view-transitions (original) (raw)

We want the size of a transition image to be the bounding rect of the element it's captured. However, this doesn't always represent the rect of the texture.

In cases where the element is too big, we capture a partial representation, optimising for the area in and around the viewport.

In cases where the element paints outside its bounding box (achievable in many ways in CSS, such as a box-shadow, or positioning of children), we want the resulting texture of the transition image to 'overflow' its bounding box.

This isn't currently possible with images on the web. The developer would need to create a wrapper element, and position the image within the wrapper.

Ways to solve this

Continue with the workaround

Create a wrapper element, and position the image within it.

This doesn't need anything additional to be added to CSS, but it's pretty rough for developers to understand and manage. @flackr has been pushing for image paint size and replaced content layout size to be independent so developers don't run into this problem.

Possible way to define this:

Allow developers to define a viewbox for an image

.foo { content: view-box(url('./image.png'), 5px, 5px, 300px, 300px); }

view-box(css-image, min-x, min-y, width, height)

The view-box function takes a CSS image, plus the arguments from SVG's viewBox. It returns a viewboxed image.

Positive values for min-x and min-y means the painting of the image will overflow the top and left of the bounding rect. Negative values mean the painting is offset from the top/left.

If min-x + width is less than the width of the image, the image will overflow the right of the bounding rect. Similar for min-y + height and the bottom of the bounding rect.

The width and height values become the intrinsic size.

A viewboxed image can be used in CSS where an image is used, except in cases where the image is tiled, such as background-image and border-image, to avoid needing to handle tiles that overlap.

Making this work for <img>, will probably need a viewbox attribute on <img> and <source>.