Limit masthead view transitions to desktop only

csswizardry · csswizardry · commit e25f4d4467ca · 2025-06-13T13:10:44.000+01:00
diff --git a/_includes/css/components.page-head--masthead.css b/_includes/css/components.page-head--masthead.css
diff --git a/_includes/header--masthead.html b/_includes/header--masthead.html
@@ -11,7 +11,7 @@
 
 {% include ribbon.html %}
 
-<header class="page-head  page-head--masthead" elementtiming=masthead style="view-transition-name: masthead;">
+<header class="page-head  page-head--masthead" elementtiming=masthead>
 
     <div class=wrapper>
 
diff --git a/css/isolated/components.page-head--masthead.scss b/css/isolated/components.page-head--masthead.scss
@@ -51,6 +51,7 @@
 
     @include media-query(desk) {
         background-image: url(/img/css/masthead-large.jpg), url(/img/css/masthead-large-lqip.jpg), var(--base64);
+        view-transition-name: masthead;
     }
 
     > .wrapper { /* [2] */

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@`
`51`	`51`
`52`	`52`	`@include media-query(desk) {`
`53`	`53`	`background-image: url(/img/css/masthead-large.jpg), url(/img/css/masthead-large-lqip.jpg), var(--base64);`
	`54`	`+ view-transition-name: masthead;`
`54`	`55`	`}`
`55`	`56`
`56`	`57`	`> .wrapper { /* [2] */`