smartphoto 2.1.11 → 2.1.13

package/README.md

@@ -181,6 +181,11 @@ Slide fields:
 		<td>update the URL hash (<code>#group=…&photo=…</code>) via the History API</td>
 		<td>true</td>
 	</tr>
+	<tr>
+		<td>useViewTransitionApi</td>
+		<td>use the View Transition API for the open animation when the browser supports it (falls back to the clone-based animation when disabled or unsupported)</td>
+		<td>true</td>
+	</tr>
 	<tr>
 		<td>swipeTopToClose</td>
 		<td>close the viewer on an upward swipe</td>

package/css/smartphoto.css

@@ -132,6 +132,17 @@ dialog.smartphoto:not([open]) {
 
 .smartphoto::backdrop {
   background-color: var(--smartphoto-backdrop-color, rgba(0, 0, 0, 1));
+  /* iOS 26 Safari の「タブバー(下)」表示では、ページ本体はツールバーの背後
+   * (レイアウトビューポートの下端より下)までエッジツーエッジで描画されるのに対し、
+   * 既定の ::backdrop はビューポート下端で止まるため、サムネイルバーの下の帯から
+   * 裏のページが覗いてしまう。dialog 本体の高さを伸ばす方法は取らない
+   * (bottom:0 のサムネイルバーごとツールバーの背後に潜ってしまう)。
+   * レイアウトに影響しない ::backdrop 側だけを 100lvh + 下側セーフエリアまで
+   * 明示的に広げて帯を覆う。lvh 非対応ブラウザでは height 宣言ごと無効になり、
+   * 下の inset: 0 による従来のビューポート全面カバーにフォールバックする */
+  position: fixed;
+  inset: 0;
+  height: calc(100lvh + env(safe-area-inset-bottom, 0px));
 }
 
 /* View Transition(openPhotoWithViewTransition() 参照)の疑似要素ツリーは document の
@@ -146,6 +157,19 @@ dialog.smartphoto:not([open]) {
   animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
+/* view-transition-name を付けなかった要素(サムネイル一覧のページ全体や、
+ * 新しく開く dialog の背景/矢印/キャプション等)は、既定では ::view-transition-*(root)
+ * が「開く前のページ」→「dialog が開いた後のページ」を丸ごとクロスフェードする。
+ * このクロスフェードは既定で mix-blend-mode: plus-lighter が掛かり、背景色が
+ * 大きく変わる(明るいページ→黒背景)場合に一瞬白っぽく光って見えたり、写真本体
+ * (smartphoto-hero)のモーフィングと重なって「一瞬消えてからまた出てくる」ように
+ * 見える原因になる。root 側のアニメーションは無効化し、写真の拡大だけを見せる */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
 .smartphoto-close {
   opacity: 0;
 }

package/css/smartphoto.min.css

@@ -1 +1 @@
-@keyframes smartphoto{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-img-wrap{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-inner{0%{transform:translateY(100px)}to{transform:translate(0)}}@keyframes smartphoto-loader{0%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(180deg)}to{opacity:.4;transform:rotate(1turn)}}@keyframes smartphoto-appear{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-hide{0%{opacity:1}to{opacity:0}}:root:has(dialog.smartphoto[open]){overflow:hidden}.smartphoto{border:none;background:transparent;padding:0;margin:0;outline:none;position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;height:var(--smartphoto-vh,100dvh);max-height:var(--smartphoto-vh,100dvh);background-color:var(--smartphoto-backdrop-color,#000);opacity:1;font-family:sans-serif;cursor:pointer;transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out),display var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out) allow-discrete,overlay var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out) allow-discrete}.smartphoto:not([open]){opacity:0}dialog.smartphoto:not([open]){display:none!important}.smartphoto::backdrop{background-color:var(--smartphoto-backdrop-color,#000)}::view-transition-group(smartphoto-hero),::view-transition-new(smartphoto-hero),::view-transition-old(smartphoto-hero){animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-close{opacity:0}.smartphoto-count{display:inline-block;color:var(--smartphoto-icon-color,#fff);font-size:16px}.smartphoto-header{display:block;box-sizing:border-box;position:fixed;z-index:102;top:0;left:0;width:100%;height:50px;padding:15px;background-color:var(--smartphoto-header-color,rgba(0,0,0,.2))}.smartphoto-content{display:block;position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}.smartphoto-dismiss{display:block;position:absolute;top:15px;right:10px;width:20px;height:20px;padding:0;border:none;background-color:var(--smartphoto-icon-color,#fff);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTU3Ni40MiAxNDA2Ljc2IDI3ODQgMTk5LjE5YTU2Ljg2IDU2Ljg2IDAgMCAwIDAtODAuMThsLTc4LjkyLTc4LjkyYTU2Ljg2IDU2Ljg2IDAgMCAwLTgwLjE4IDBMMTQxNy4zMiAxMjQ3LjY2IDIwOS43NSA0MC4wOWE1Ni44NiA1Ni44NiAwIDAgMC04MC4xOCAwTDUwLjY1IDExOWE1Ni44NiA1Ni44NiAwIDAgMCAwIDgwLjE4bDEyMDcuNTggMTIwNy41OEw1MC42NSAyNjE0LjM0YTU2Ljg2IDU2Ljg2IDAgMCAwIDAgODAuMThsNzguOTIgNzguOTJhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGwxMjA3LjU3LTEyMDcuNThMMjYyNC45IDI3NzMuNDRhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGw3OC45Mi03OC45MmE1Ni44NiA1Ni44NiAwIDAgMCAwLTgwLjE4WiIvPjwvc3ZnPg==);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTU3Ni40MiAxNDA2Ljc2IDI3ODQgMTk5LjE5YTU2Ljg2IDU2Ljg2IDAgMCAwIDAtODAuMThsLTc4LjkyLTc4LjkyYTU2Ljg2IDU2Ljg2IDAgMCAwLTgwLjE4IDBMMTQxNy4zMiAxMjQ3LjY2IDIwOS43NSA0MC4wOWE1Ni44NiA1Ni44NiAwIDAgMC04MC4xOCAwTDUwLjY1IDExOWE1Ni44NiA1Ni44NiAwIDAgMCAwIDgwLjE4bDEyMDcuNTggMTIwNy41OEw1MC42NSAyNjE0LjM0YTU2Ljg2IDU2Ljg2IDAgMCAwIDAgODAuMThsNzguOTIgNzguOTJhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGwxMjA3LjU3LTEyMDcuNThMMjYyNC45IDI3NzMuNDRhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGw3OC45Mi03OC45MmE1Ni44NiA1Ni44NiAwIDAgMCAwLTgwLjE4WiIvPjwvc3ZnPg==);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;text-decoration:none;cursor:pointer;line-height:1}.smartphoto-body{z-index:102;margin:0 auto}.smartphoto-body,.smartphoto-inner{position:relative;width:100%;height:100%}.smartphoto-inner{vertical-align:top}.smartphoto-img{display:none;max-width:none;width:auto;height:auto;cursor:zoom-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-webkit-user-drag:none}.smartphoto-img.active{display:block}.smartphoto-img-onmove{cursor:grab;cursor:-webkit-grab;transition:none}.smartphoto-img-elasticmove{transition:transform var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-img-wrap{display:inline-block;opacity:1;touch-action:none;-webkit-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-moz-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-ms-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-o-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-img-wrap;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-img-left{transform:translateX(150%)!important}.smartphoto-img-right{transform:translateX(-150%)!important}.smartphoto-arrows{list-style-type:none;margin:0;padding:0;position:relative;z-index:1002;top:50%;left:0;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-arrows[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows li{display:block;position:absolute;top:var(--smartphoto-arrow-top,50%);width:30px;height:30px;margin-top:-20px;box-sizing:content-box;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-appear}.smartphoto-arrows li:focus{outline:none}.smartphoto-arrows [aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer}.smartphoto-arrow-right{right:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-right button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCAxNDE3LjMyIDY0My41OSAyMjNhNzIuMjEgNzIuMjEgMCAwIDEgMC0xMDEuODJMNzQzLjgyIDIxYTcyLjIxIDcyLjIxIDAgMCAxIDEwMS44MiAwbDEyNDUuMTkgMTI0NS4xOSAxMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAgMTAxLjgyTDg0NS42NCAyODEzLjY1YTcyLjIxIDcyLjIxIDAgMCAxLTEwMS44MiAwbC0xMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartphoto-arrow-left{left:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-left button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNOTk2Ljc3IDE0MTcuMzIgMjE5MS4wNiAyMjNhNzIuMjEgNzIuMjEgMCAwIDAgMC0xMDEuODJMMjA5MC44MyAyMUE3Mi4yMSA3Mi4yMSAwIDAgMCAxOTg5IDIxTDc0My44MiAxMjY2LjE5bC0xMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAgMTAxLjgyTDE5ODkgMjgxMy42NWE3Mi4yMSA3Mi4yMSAwIDAgMCAxMDEuODIgMGwxMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartPhotoArrowHideIcon{display:none}.smartphoto-nav{position:absolute;bottom:0;left:0;width:100%;padding-bottom:env(safe-area-inset-bottom,0);box-sizing:border-box;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-nav[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-nav ul{display:block;overflow-x:auto;list-style:none;margin:0;padding:0;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.smartphoto-nav li{display:inline-block;overflow:hidden;width:50px;height:50px}.smartphoto-nav button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:#fff;background-position:50%;background-size:cover;opacity:.5;cursor:pointer}.smartphoto-nav button:focus{opacity:.8}.smartphoto-nav button.current{opacity:1}.smartphoto-nav img{width:auto;height:100%}.smartphoto-list{list-style-type:none;position:absolute;z-index:101;top:0;left:0;margin:0;padding:0;white-space:nowrap}.smartphoto-list li{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:all var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-list li:focus{outline:none}.smartphoto-list-onmove{transition:all .3s var(--smartphoto-animation-function,ease-out)}.smartphoto-caption{overflow:hidden;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:50px;padding:0 50px;color:var(--smartphoto-icon-color,#fff);font-size:12px;text-align:center;line-height:50px;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:400}.smartphoto-caption:focus{outline:none}.smartphoto-loader-wrap{display:block;position:relative;z-index:103;width:0;height:0;transform:translate(50vw,50vh);transform:translate(50vw,50dvh);transform:translate(50vw,calc(var(--smartphoto-vh, 100dvh)/2))}.smartphoto-loader{position:absolute;z-index:101;top:0;left:0;width:30px;height:30px;margin-top:-25px;margin-left:-25px;border:8px solid #17cddd;border-right-color:transparent;border-radius:50%;animation:smartphoto-loader .5s linear infinite}.smartphoto-img-clone{position:fixed;z-index:100;top:0;left:0;transition:all var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-sr-only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0)}
+@keyframes smartphoto{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-img-wrap{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-inner{0%{transform:translateY(100px)}to{transform:translate(0)}}@keyframes smartphoto-loader{0%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(180deg)}to{opacity:.4;transform:rotate(1turn)}}@keyframes smartphoto-appear{0%{opacity:0}to{opacity:1}}@keyframes smartphoto-hide{0%{opacity:1}to{opacity:0}}:root:has(dialog.smartphoto[open]){overflow:hidden}.smartphoto{border:none;background:transparent;padding:0;margin:0;outline:none;position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;height:var(--smartphoto-vh,100dvh);max-height:var(--smartphoto-vh,100dvh);background-color:var(--smartphoto-backdrop-color,#000);opacity:1;font-family:sans-serif;cursor:pointer;transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out),display var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out) allow-discrete,overlay var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out) allow-discrete}.smartphoto:not([open]){opacity:0}dialog.smartphoto:not([open]){display:none!important}.smartphoto::backdrop{background-color:var(--smartphoto-backdrop-color,#000);position:fixed;inset:0;height:calc(100lvh + env(safe-area-inset-bottom, 0px))}::view-transition-group(smartphoto-hero),::view-transition-new(smartphoto-hero),::view-transition-old(smartphoto-hero){animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}::view-transition-new(root),::view-transition-old(root){animation:none;mix-blend-mode:normal}.smartphoto-close{opacity:0}.smartphoto-count{display:inline-block;color:var(--smartphoto-icon-color,#fff);font-size:16px}.smartphoto-header{display:block;box-sizing:border-box;position:fixed;z-index:102;top:0;left:0;width:100%;height:50px;padding:15px;background-color:var(--smartphoto-header-color,rgba(0,0,0,.2))}.smartphoto-content{display:block;position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}.smartphoto-dismiss{display:block;position:absolute;top:15px;right:10px;width:20px;height:20px;padding:0;border:none;background-color:var(--smartphoto-icon-color,#fff);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTU3Ni40MiAxNDA2Ljc2IDI3ODQgMTk5LjE5YTU2Ljg2IDU2Ljg2IDAgMCAwIDAtODAuMThsLTc4LjkyLTc4LjkyYTU2Ljg2IDU2Ljg2IDAgMCAwLTgwLjE4IDBMMTQxNy4zMiAxMjQ3LjY2IDIwOS43NSA0MC4wOWE1Ni44NiA1Ni44NiAwIDAgMC04MC4xOCAwTDUwLjY1IDExOWE1Ni44NiA1Ni44NiAwIDAgMCAwIDgwLjE4bDEyMDcuNTggMTIwNy41OEw1MC42NSAyNjE0LjM0YTU2Ljg2IDU2Ljg2IDAgMCAwIDAgODAuMThsNzguOTIgNzguOTJhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGwxMjA3LjU3LTEyMDcuNThMMjYyNC45IDI3NzMuNDRhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGw3OC45Mi03OC45MmE1Ni44NiA1Ni44NiAwIDAgMCAwLTgwLjE4WiIvPjwvc3ZnPg==);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTU3Ni40MiAxNDA2Ljc2IDI3ODQgMTk5LjE5YTU2Ljg2IDU2Ljg2IDAgMCAwIDAtODAuMThsLTc4LjkyLTc4LjkyYTU2Ljg2IDU2Ljg2IDAgMCAwLTgwLjE4IDBMMTQxNy4zMiAxMjQ3LjY2IDIwOS43NSA0MC4wOWE1Ni44NiA1Ni44NiAwIDAgMC04MC4xOCAwTDUwLjY1IDExOWE1Ni44NiA1Ni44NiAwIDAgMCAwIDgwLjE4bDEyMDcuNTggMTIwNy41OEw1MC42NSAyNjE0LjM0YTU2Ljg2IDU2Ljg2IDAgMCAwIDAgODAuMThsNzguOTIgNzguOTJhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGwxMjA3LjU3LTEyMDcuNThMMjYyNC45IDI3NzMuNDRhNTYuODYgNTYuODYgMCAwIDAgODAuMTggMGw3OC45Mi03OC45MmE1Ni44NiA1Ni44NiAwIDAgMCAwLTgwLjE4WiIvPjwvc3ZnPg==);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;text-decoration:none;cursor:pointer;line-height:1}.smartphoto-body{z-index:102;margin:0 auto}.smartphoto-body,.smartphoto-inner{position:relative;width:100%;height:100%}.smartphoto-inner{vertical-align:top}.smartphoto-img{display:none;max-width:none;width:auto;height:auto;cursor:zoom-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-webkit-user-drag:none}.smartphoto-img.active{display:block}.smartphoto-img-onmove{cursor:grab;cursor:-webkit-grab;transition:none}.smartphoto-img-elasticmove{transition:transform var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-img-wrap{display:inline-block;opacity:1;touch-action:none;-webkit-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-moz-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-ms-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);-o-transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);transition:opacity var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-img-wrap;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-img-left{transform:translateX(150%)!important}.smartphoto-img-right{transform:translateX(-150%)!important}.smartphoto-arrows{list-style-type:none;margin:0;padding:0;position:relative;z-index:1002;top:50%;left:0;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-arrows[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows li{display:block;position:absolute;top:var(--smartphoto-arrow-top,50%);width:30px;height:30px;margin-top:-20px;box-sizing:content-box;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out);animation-name:smartphoto-appear}.smartphoto-arrows li:focus{outline:none}.smartphoto-arrows [aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer}.smartphoto-arrow-right{right:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-right button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCAxNDE3LjMyIDY0My41OSAyMjNhNzIuMjEgNzIuMjEgMCAwIDEgMC0xMDEuODJMNzQzLjgyIDIxYTcyLjIxIDcyLjIxIDAgMCAxIDEwMS44MiAwbDEyNDUuMTkgMTI0NS4xOSAxMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAgMTAxLjgyTDg0NS42NCAyODEzLjY1YTcyLjIxIDcyLjIxIDAgMCAxLTEwMS44MiAwbC0xMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAxIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartphoto-arrow-left{left:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-left button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHZpZXdCb3g9IjAgMCAyODM0LjY1IDI4MzQuNjUiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNOTk2Ljc3IDE0MTcuMzIgMjE5MS4wNiAyMjNhNzIuMjEgNzIuMjEgMCAwIDAgMC0xMDEuODJMMjA5MC44MyAyMUE3Mi4yMSA3Mi4yMSAwIDAgMCAxOTg5IDIxTDc0My44MiAxMjY2LjE5bC0xMDAuMjMgMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAgMTAxLjgyTDE5ODkgMjgxMy42NWE3Mi4yMSA3Mi4yMSAwIDAgMCAxMDEuODIgMGwxMDAuMjMtMTAwLjIzYTcyLjIxIDcyLjIxIDAgMCAwIDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartPhotoArrowHideIcon{display:none}.smartphoto-nav{position:absolute;bottom:0;left:0;width:100%;padding-bottom:env(safe-area-inset-bottom,0);box-sizing:border-box;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed,.45s);animation-timing-function:var(--smartphoto-animation-function,ease-out)}.smartphoto-nav[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-nav ul{display:block;overflow-x:auto;list-style:none;margin:0;padding:0;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.smartphoto-nav li{display:inline-block;overflow:hidden;width:50px;height:50px}.smartphoto-nav button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:#fff;background-position:50%;background-size:cover;opacity:.5;cursor:pointer}.smartphoto-nav button:focus{opacity:.8}.smartphoto-nav button.current{opacity:1}.smartphoto-nav img{width:auto;height:100%}.smartphoto-list{list-style-type:none;position:absolute;z-index:101;top:0;left:0;margin:0;padding:0;white-space:nowrap}.smartphoto-list li{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:all var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-list li:focus{outline:none}.smartphoto-list-onmove{transition:all .3s var(--smartphoto-animation-function,ease-out)}.smartphoto-caption{overflow:hidden;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:50px;padding:0 50px;color:var(--smartphoto-icon-color,#fff);font-size:12px;text-align:center;line-height:50px;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:400}.smartphoto-caption:focus{outline:none}.smartphoto-loader-wrap{display:block;position:relative;z-index:103;width:0;height:0;transform:translate(50vw,50vh);transform:translate(50vw,50dvh);transform:translate(50vw,calc(var(--smartphoto-vh, 100dvh)/2))}.smartphoto-loader{position:absolute;z-index:101;top:0;left:0;width:30px;height:30px;margin-top:-25px;margin-left:-25px;border:8px solid #17cddd;border-right-color:transparent;border-radius:50%;animation:smartphoto-loader .5s linear infinite}.smartphoto-img-clone{position:fixed;z-index:100;top:0;left:0;transition:all var(--smartphoto-animation-speed,.45s) var(--smartphoto-animation-function,ease-out)}.smartphoto-sr-only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0)}

package/js/jquery-smartphoto.js

@@ -1,5 +1,5 @@
 /*!
- * SmartPhoto v2.1.11
+ * SmartPhoto v2.1.13
  * (c) appleple
  * Released under the MIT License.
  */
@@ -10,6 +10,9 @@
     const agent = navigator.userAgent;
     return agent.indexOf("iPhone") > 0 || agent.indexOf("iPad") > 0 || agent.indexOf("ipod") > 0 || agent.indexOf("Android") > 0;
   };
+  var isWebKit = () => {
+    return typeof window.webkitConvertPointFromNodeToPage === "function";
+  };
   function deepExtend(out, ...args) {
     var _a;
     out = out || {};
@@ -148,6 +151,7 @@
     verticalGravity: false,
     useOrientationApi: false,
     useHistoryApi: true,
+    useViewTransitionApi: true,
     swipeTopToClose: false,
     swipeBottomToClose: true,
     swipeOffset: 100,
@@ -435,6 +439,7 @@
     let oldPos = null;
     let moveDir = null;
     let swipeStartTime = 0;
+    let tapTarget = null;
     let photoSwipable = false;
     let firstPhotoPos = null;
     let oldPhotoPos = null;
@@ -565,6 +570,7 @@
       firstPos = pos;
       oldPos = pos;
       swipeStartTime = Date.now();
+      tapTarget = e.target;
     }
     function startPhotoDrag(e) {
       photoSwipable = true;
@@ -706,11 +712,11 @@
       const swipeHeight = last.y - first.y;
       const noMove = swipeWidth === 0 && swipeHeight === 0;
       if (!isSmartPhone2() && noMove) {
-        callbacks.onTap();
+        callbacks.onTap(tapTarget);
         return;
       }
       if (Math.abs(offset) <= 500 && noMove) {
-        callbacks.onTap();
+        callbacks.onTap(tapTarget);
         return;
       }
       tapSecond = now;
@@ -1035,6 +1041,9 @@
         if (slideRefs.imgWrap && slideRefs.img) {
           slideRefs.imgWrap.style.transform = `translate(${item.x}px,${item.y}px) scale(${item.scale})`;
           slideRefs.img.style.width = `${item.width}px`;
+          if (!isCurrent) {
+            slideRefs.img.style.transform = "translate(0px,0px) scale(1)";
+          }
           slideRefs.img.classList.toggle("active", viewer.appear);
           slideRefs.img.classList.toggle(
             classNames.smartPhotoImgOnMove,
@@ -1118,6 +1127,23 @@
       refs.list.style.transform = `translate(${viewer.translateX}px,${viewer.translateY}px)`;
       refs.list.classList.toggle(classNames.smartPhotoListOnMove, viewer.onMove);
     }
+    function applyViewTransitionLayout(state) {
+      for (const [item, slideRefs] of refs.slides) {
+        if (item.index !== state.viewer.currentIndex) {
+          continue;
+        }
+        const { img, imgWrap } = slideRefs;
+        if (!img || !imgWrap || !item.width || !item.scale || item.scale >= 1) {
+          return;
+        }
+        const before = img.getBoundingClientRect();
+        img.style.width = `${item.width * item.scale}px`;
+        imgWrap.style.transform = `translate(${item.x}px,${item.y}px) scale(1)`;
+        const after = img.getBoundingClientRect();
+        imgWrap.style.transform = `translate(${item.x + before.left - after.left}px,${item.y + before.top - after.top}px) scale(1)`;
+        return;
+      }
+    }
     function showAppearEffect(effect) {
       const clone = document.createElement("img");
       clone.className = classNames.smartPhotoImgClone;
@@ -1142,6 +1168,7 @@
       render,
       syncSlides,
       updatePhotoTransform,
+      applyViewTransitionLayout,
       updateListTransform,
       showAppearEffect,
       removeAppearEffect,
@@ -1178,6 +1205,13 @@
       // doHideEffect() の後始末(画像に設定した translateY の除去と promise 解決)を
       // transitionend を待たずに即時実行するための関数。後始末が済むと null に戻る
       this.finishHideEffect = null;
+      // 開く View Transition が進行中かどうか。進行中にリサイズ由来の再計算(commit)が
+      // 走ると、モーフの目標位置は古いビューポート基準のままなのに実要素だけ新しい
+      // 位置へ動いて「一旦ずれた位置に出てから正位置へ戻る」ように見え、さらに
+      // モーフ用レイアウト(applyViewTransitionLayout)も巻き戻されてしまう。
+      // そのため進行中はリサイズ再計算を保留し、finished 後にまとめて実行する
+      this.isViewTransitionActive = false;
+      this.pendingViewTransitionResync = false;
       this.timeouts = [];
       this.loadAllFired = /* @__PURE__ */ new Set();
       this.syncedGroupId = null;
@@ -1236,16 +1270,24 @@
         if (!this.isSmartPhoneFlag || !this.state.viewer.isOpen || !currentItems(this.state)) {
           return;
         }
+        if (this.isViewTransitionActive) {
+          this.pendingViewTransitionResync = true;
+          return;
+        }
         this.resetTranslateCurrent();
         this.setPosByCurrentIndex();
         this.setSizeByScreen();
         this.commit();
       };
       this.handleResize = () => {
-        if (!currentItems(this.state)) {
+        if (!this.state.viewer.isOpen || !currentItems(this.state)) {
           return;
         }
         this.updateViewportHeight();
+        if (this.isViewTransitionActive) {
+          this.pendingViewTransitionResync = true;
+          return;
+        }
         this.resetTranslateCurrent();
         this.setPosByCurrentIndex();
         this.setSizeByScreen();
@@ -1265,7 +1307,11 @@
         }
       };
       this.handleOrientationChange = () => {
-        if (!currentItems(this.state)) {
+        if (!this.state.viewer.isOpen || !currentItems(this.state)) {
+          return;
+        }
+        if (this.isViewTransitionActive) {
+          this.pendingViewTransitionResync = true;
           return;
         }
         this.updateViewportHeight();
@@ -1278,6 +1324,9 @@
         const timeout = 500;
         const poll = (time) => {
           this.scheduleTimeout(() => {
+            if (!this.state.viewer.isOpen) {
+              return;
+            }
             if (prevWidth !== getWindowWidth2()) {
               this.updateViewportHeight();
               this.resetTranslateCurrent();
@@ -1430,10 +1479,26 @@
       this.state.viewer.photoPosY = 0;
       this.view.updatePhotoTransform(this.state);
       this.scheduleTimeout(() => {
+        if (!this.state.viewer.isOpen) {
+          return;
+        }
         this.state.viewer.scale = true;
         this.view.updatePhotoTransform(this.state);
         this.fireEvent("zoomin");
-      }, 300);
+      }, this.state.options.animationSpeed);
+    }
+    // zoomPhoto() と同じ「ズームの余地があるか」の判定(scaleBorder <= 1 なら
+    // ズームしても見た目が変わらない)。zoomPhoto() 自体は公開 API の契約
+    // (ズームできなければ何もしない)を保つ必要があるため、タップの
+    // zoom-or-close 分岐(§7)用に判定だけを切り出している
+    canZoomCurrentPhoto() {
+      const item = currentItem(this.state);
+      return !!item && scaleBorder(
+        item,
+        getWindowWidth2(),
+        getWindowHeight2(),
+        this.isSmartPhoneFlag
+      ) > 1;
     }
     zoomOutPhoto() {
       this.state.viewer.scaleSize = 1;
@@ -1644,6 +1709,7 @@
         this.state.options.headerHeight,
         this.state.options.footerHeight
       );
+      this.syncFillScale();
     }
     // resize/orientationchange ハンドラは呼び出し前に currentItems の存在を確認済み
     resetTranslateCurrent() {
@@ -1657,9 +1723,18 @@
       }
       return null;
     }
+    currentLiElement() {
+      for (const [item, slideRefs] of this.view.refs.slides) {
+        if (item.index === this.state.viewer.currentIndex) {
+          return slideRefs.li;
+        }
+      }
+      return null;
+    }
     // ---- 内部: dialog 制御(§8) ----
     syncDialog() {
       const { dialog, caption } = this.view.refs;
+      dialog.style.transition = this.state.options.showAnimation === false ? "none" : "";
       if (this.state.viewer.isOpen && !dialog.open) {
         dialog.style.removeProperty("display");
         dialog.showModal();
@@ -1671,6 +1746,7 @@
     }
     commit() {
       this.view.render(this.state);
+      this.view.updatePhotoTransform(this.state);
       this.syncDialog();
     }
     // ---- 内部: 開く演出 ----
@@ -1689,20 +1765,34 @@
       this.setPosByCurrentIndex();
       this.setSizeByScreen();
       setArrow(this.state);
-      if (this.state.options.resizeStyle === "fill" && this.isSmartPhoneFlag) {
-        const item = currentItem(this.state);
-        this.state.viewer.scale = true;
-        this.state.viewer.hideUi = true;
-        this.state.viewer.scaleSize = scaleBorder(
-          item,
-          getWindowWidth2(),
-          getWindowHeight2(),
-          this.isSmartPhoneFlag
-        );
+    }
+    // resizeStyle: 'fill' はスマートフォンでのみ、画面を隙間なく覆うよう
+    // scaleBorder() の倍率を viewer.scaleSize に適用する。fit用の item.scale に
+    // 依存するため、setSizeByScreen() の末尾から必ず呼ばれる(個別に呼ぶ必要はない)
+    syncFillScale() {
+      if (this.state.options.resizeStyle !== "fill" || !this.isSmartPhoneFlag) {
+        return;
+      }
+      const item = currentItem(this.state);
+      if (!item) {
+        return;
       }
+      this.state.viewer.scale = true;
+      this.state.viewer.hideUi = true;
+      this.state.viewer.scaleSize = scaleBorder(
+        item,
+        getWindowWidth2(),
+        getWindowHeight2(),
+        this.isSmartPhoneFlag
+      );
     }
     supportsViewTransition() {
-      return typeof document.startViewTransition === "function";
+      return this.state.options.useViewTransitionApi && typeof document.startViewTransition === "function" && // WebKit には「view-transition-name 付き要素が root スナップショットから
+      // 除外されず、モーフ中に最終位置へ二重描画される」実装バグがあり、開く演出が
+      // 「一旦ずれた位置に出てから正位置へ戻る」ように乱れる。API 対応の有無では
+      // 検出できないため、WebKit ではクローン演出(addAppearEffect)へフォールバック
+      // する(§util.isWebKit)
+      !isWebKit();
     }
     openPhotoWithViewTransition(trigger) {
       var _a, _b;
@@ -1715,7 +1805,8 @@
       if (thumbImg) {
         thumbImg.style.viewTransitionName = transitionName;
       }
-      const clearNames = () => {
+      const cleanup = () => {
+        this.isViewTransitionActive = false;
         if (thumbImg) {
           thumbImg.style.viewTransitionName = "";
         }
@@ -1723,6 +1814,21 @@
         if (img) {
           img.style.viewTransitionName = "";
         }
+        if (!this.state.viewer.isOpen) {
+          this.pendingViewTransitionResync = false;
+          return;
+        }
+        if (this.pendingViewTransitionResync && currentItems(this.state)) {
+          this.pendingViewTransitionResync = false;
+          this.updateViewportHeight();
+          this.resetTranslateCurrent();
+          this.setPosByCurrentIndex();
+          this.setSizeByScreen();
+          this.commit();
+          return;
+        }
+        this.pendingViewTransitionResync = false;
+        this.view.render(this.state);
       };
       const transition = (_b = document.startViewTransition) == null ? void 0 : _b.call(document, () => {
         this.initPhoto();
@@ -1732,11 +1838,16 @@
           thumbImg.style.viewTransitionName = "";
         }
         this.currentImgElement().style.viewTransitionName = transitionName;
+        this.view.applyViewTransitionLayout(this.state);
       });
-      transition == null ? void 0 : transition.ready.catch(() => {
-        clearNames();
+      if (!transition) {
+        return;
+      }
+      this.isViewTransitionActive = true;
+      transition.ready.catch(() => {
+        cleanup();
       });
-      transition == null ? void 0 : transition.finished.then(clearNames, clearNames);
+      transition.finished.then(cleanup, cleanup);
     }
     // doOpen() の呼び出し元でこの分岐に来る時点で showAnimation !== false が保証されている
     addAppearEffect(trigger, item) {
@@ -1846,10 +1957,14 @@
         if (getWindowWidth2() === winWidthBefore && getWindowHeight2() === winHeightBefore) {
           return;
         }
+        if (this.isViewTransitionActive) {
+          this.pendingViewTransitionResync = true;
+          return;
+        }
         this.resetTranslateCurrent();
         this.setPosByCurrentIndex();
         this.setSizeByScreen();
-        this.view.render(this.state);
+        this.commit();
       });
     }
     openPhoto(item, trigger) {
@@ -1871,25 +1986,42 @@
     }
     doHideEffect(dir) {
       return new Promise((resolve) => {
+        if (this.state.options.showAnimation === false) {
+          resolve();
+          return;
+        }
         const dialog = this.view.refs.dialog;
-        const img = this.currentImgElement();
+        const item = currentItem(this.state);
+        const li = item ? this.currentLiElement() : null;
         const height = getWindowHeight2();
-        const applied = dir === "top" ? `translateY(-${height}px)` : `translateY(${height}px)`;
-        const finish = () => {
+        const img = this.currentImgElement();
+        let frozenTransform = null;
+        if (img) {
+          const rendered = getComputedStyle(img).transform;
+          if (rendered && rendered !== "none") {
+            img.style.transform = rendered;
+            frozenTransform = img.style.transform;
+          }
+        }
+        if (li && item) {
+          const offsetY = dir === "top" ? -height : height;
+          li.style.transform = `translate(${item.translateX}px,${item.translateY + offsetY}px)`;
+        }
+        const finish = (e) => {
           if (this.finishHideEffect !== finish) {
             return;
           }
+          if (e && e.target !== dialog) {
+            return;
+          }
           this.finishHideEffect = null;
           dialog.removeEventListener("transitionend", finish, true);
-          if (img && img.style.transform === applied) {
+          if (img && frozenTransform && img.style.transform === frozenTransform) {
             img.style.transform = "";
           }
           resolve();
         };
         this.finishHideEffect = finish;
-        if (img) {
-          img.style.transform = applied;
-        }
         dialog.addEventListener("transitionend", finish, true);
         this.scheduleTimeout(finish, this.state.options.animationSpeed + 100);
       });
@@ -1960,7 +2092,9 @@
         const item = currentItem(this.state);
         this.state.viewer.onMove = false;
         setArrow(this.state);
-        this.commit();
+        if (this.state.viewer.isOpen) {
+          this.commit();
+        }
         if (this.state.viewer.oldIndex !== this.state.viewer.currentIndex) {
           this.fireEvent("change");
         }
@@ -2045,7 +2179,21 @@
           }
           this.slideList();
         },
-        onTap: () => this.zoomPhoto(),
+        // 主要ライトボックスのデファクトスタンダード(PhotoSwipe: bgClickAction
+        // 'close' / imageClickAction 'zoom-or-close'、Fancybox: backdropClick
+        // 'close'、GLightbox: closeOnOutsideClick、lightGallery: closable)に合わせ、
+        // 写真の上のタップはズーム、写真の外(背景)のタップは閉じる。ズームの
+        // 余地がない(scaleBorder <= 1 で zoomPhoto() が何もしない)写真の上の
+        // タップも、無反応にせず 'zoom-or-close' に倣って閉じる
+        onTap: (target) => {
+          const img = this.currentImgElement();
+          const onPhoto = !!img && target instanceof Node && img.contains(target);
+          if (onPhoto && this.canZoomCurrentPhoto()) {
+            this.zoomPhoto();
+          } else {
+            this.hidePhoto();
+          }
+        },
         onGestureStart: () => {
           this.fireEvent("gesturestart");
           this.view.updatePhotoTransform(this.state);