<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/view-transitions-handling-aspect-ratio-changes-sjtspaal3" -->

---
title: View transitions: Handling aspect ratio changes | daily.dev
description: View Transitions can result in ghosting if an element changes shape. This can be prevented by changing the starting or ending state, or by moving individual...
canonical: https://daily.dev/posts/view-transitions-handling-aspect-ratio-changes-sjtspaal3
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: View transitions: Handling aspect ratio changes | daily.dev
og:description: View Transitions can result in ghosting if an element changes shape. This can be prevented by changing the starting or ending state, or by moving individual...
og:url: https://daily.dev/posts/view-transitions-handling-aspect-ratio-changes-sjtspaal3
og:image: https://api.daily.dev/og/posts/sjTSpAaL3.png
og:image:alt: View transitions: Handling aspect ratio changes
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# View transitions: Handling aspect ratio changes

**[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 1 min read · 3 upvotes · 0 comments

## Summary

View Transitions can result in ghosting if an element changes shape. This can be prevented by changing the starting or ending state, or by moving individual parts of the element.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://frontendmasters.com/blog/view-transitions-handling-aspect-ratio-changes/>

---

Tags: [#css](https://daily.dev/tags/css), [#view-transitions](https://daily.dev/tags/view-transitions), [#webdev](https://daily.dev/tags/webdev)

[View this post on daily.dev](https://daily.dev/posts/view-transitions-handling-aspect-ratio-changes-sjtspaal3)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"View transitions: Handling aspect ratio changes","url":"https://daily.dev/posts/view-transitions-handling-aspect-ratio-changes-sjtspaal3","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/view-transitions-handling-aspect-ratio-changes-sjtspaal3"},"datePublished":"2024-02-29T15:17:45.080Z","dateModified":"2026-06-25T02:13:45.012Z","description":"View Transitions can result in ghosting if an element changes shape. This can be prevented by changing the starting or ending state, or by moving individual...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/dd821ced63c393438c3bec954ff72a8f?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/dd821ced63c393438c3bec954ff72a8f?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/view-transitions-handling-aspect-ratio-changes-sjtspaal3","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,view-transitions,webdev","timeRequired":"PT1M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"View transitions: Handling aspect ratio changes"}]}
```

