fractional-translation-from-position-ref.html (642B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: fractional translation from position (ref)</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 body { 9 width: 100vw; 10 height: 100vh; 11 background: grey; 12 font: 12px/1 Ahem; 13 } 14 15 #target { 16 width: 100px; 17 height: 100px; 18 position: fixed; 19 top: 100.52px; 20 left: 100.37px; 21 22 view-transition-name: target; 23 contain: layout; 24 will-change: filter; 25 } 26 </style> 27 28 <div id=target> 29 Here is some text which should not be blurry. 30 </div>