From 4c557a5959b3ad909056df6cb46c5bf56a0da8ee Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 2 Apr 2019 16:25:27 +0200 Subject: [PATCH] prefer transform scaling over zoom on hdpi displays --- js/reveal.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index 5c026db..20a967a 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2243,10 +2243,12 @@ transformSlides( { layout: '' } ); } else { - // Prefer zoom for scaling up so that content remains crisp. - // Don't use zoom to scale down since that can lead to shifts - // in text layout/line breaks. - if( scale > 1 && features.zoom ) { + // 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 && features.zoom && window.devicePixelRatio < 2 ) { dom.slides.style.zoom = scale; dom.slides.style.left = ''; dom.slides.style.top = ''; @@ -2254,7 +2256,10 @@ dom.slides.style.right = ''; transformSlides( { layout: '' } ); } - // Apply scale transform as a fallback + // 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%';