always use css transforms for presentation scaling (zoom has too many…

… quirks even if it is slightly sharper on ldpi displays)

js/reveal.js

@@ -898,31 +898,12 @@ export default function( revealElement, options ) {
 					transformSlides( { layout: '' } );
 				}
 				else {
-					// Zoom Scaling
-					// Content remains crisp no matter how much we scale. Side
-					// effects are minor differences in text layout and iframe
-					// viewports changing size. A 200x200 iframe viewport in a
-					// 2x zoomed presentation ends up having a 400x400 viewport.
-					if( scale > 1 && Device.supportsZoom && window.devicePixelRatio < 2 ) {
-						dom.slides.style.zoom = scale;
-						dom.slides.style.left = '';
-						dom.slides.style.top = '';
-						dom.slides.style.bottom = '';
-						dom.slides.style.right = '';
-						transformSlides( { layout: '' } );
-					}
-					// Transform Scaling
-					// Content layout remains the exact same when scaled up.
-					// Side effect is content becoming blurred, especially with
-					// high scale values on ldpi screens.
-					else {
-						dom.slides.style.zoom = '';
-						dom.slides.style.left = '50%';
-						dom.slides.style.top = '50%';
-						dom.slides.style.bottom = 'auto';
-						dom.slides.style.right = 'auto';
-						transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
-					}
+					dom.slides.style.zoom = '';
+					dom.slides.style.left = '50%';
+					dom.slides.style.top = '50%';
+					dom.slides.style.bottom = 'auto';
+					dom.slides.style.right = 'auto';
+					transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
 				}
 
 				// Select all slides, vertical and horizontal
@@ -964,6 +945,8 @@ export default function( revealElement, options ) {
 				}
 			}
 
+			dom.viewport.style.setProperty( '--slide-scale', scale );
+
 			progress.update();
 			backgrounds.updateParallax();
 

js/utils/device.js

@@ -1,15 +1,8 @@
 const UA = navigator.userAgent;
-const testElement = document.createElement( 'div' );
 
 export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
 						( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS
 
 export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );
 
-export const isAndroid = /android/gi.test( UA );
-
-// Flags if we should use zoom instead of transform to scale
-// up slides. Zoom produces crisper results but has a lot of
-// xbrowser quirks so we only use it in whitelisted browsers.
-export const supportsZoom = 'zoom' in testElement.style && !isMobile &&
-				( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );
+export const isAndroid = /android/gi.test( UA );