Skip to content

Commit e281b32

Browse files
hakimelhakimel
committed
always use css transforms for presentation scaling (zoom has too many quirks even if it is slightly sharper on ldpi displays)
1 parent 918ee56 commit e281b32

File tree

6 files changed

+13
-37
lines changed

6 files changed

+13
-37
lines changed

‎dist/reveal.esm.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/reveal.esm.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/reveal.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/reveal.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/reveal.js‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -898,31 +898,12 @@ export default function( revealElement, options ) {
898898
transformSlides( { layout: '' } );
899899
}
900900
else {
901-
// Zoom Scaling
902-
// Content remains crisp no matter how much we scale. Side
903-
// effects are minor differences in text layout and iframe
904-
// viewports changing size. A 200x200 iframe viewport in a
905-
// 2x zoomed presentation ends up having a 400x400 viewport.
906-
if( scale > 1 && Device.supportsZoom && window.devicePixelRatio < 2 ) {
907-
dom.slides.style.zoom = scale;
908-
dom.slides.style.left = '';
909-
dom.slides.style.top = '';
910-
dom.slides.style.bottom = '';
911-
dom.slides.style.right = '';
912-
transformSlides( { layout: '' } );
913-
}
914-
// Transform Scaling
915-
// Content layout remains the exact same when scaled up.
916-
// Side effect is content becoming blurred, especially with
917-
// high scale values on ldpi screens.
918-
else {
919-
dom.slides.style.zoom = '';
920-
dom.slides.style.left = '50%';
921-
dom.slides.style.top = '50%';
922-
dom.slides.style.bottom = 'auto';
923-
dom.slides.style.right = 'auto';
924-
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
925-
}
901+
dom.slides.style.zoom = '';
902+
dom.slides.style.left = '50%';
903+
dom.slides.style.top = '50%';
904+
dom.slides.style.bottom = 'auto';
905+
dom.slides.style.right = 'auto';
906+
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
926907
}
927908

928909
// Select all slides, vertical and horizontal
@@ -964,6 +945,8 @@ export default function( revealElement, options ) {
964945
}
965946
}
966947

948+
dom.viewport.style.setProperty( '--slide-scale', scale );
949+
967950
progress.update();
968951
backgrounds.updateParallax();
969952

‎js/utils/device.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
const UA = navigator.userAgent;
2-
const testElement = document.createElement( 'div' );
32

43
export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
54
( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS
65

76
export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );
87

9-
export const isAndroid = /android/gi.test( UA );
10-
11-
// Flags if we should use zoom instead of transform to scale
12-
// up slides. Zoom produces crisper results but has a lot of
13-
// xbrowser quirks so we only use it in whitelisted browsers.
14-
export const supportsZoom = 'zoom' in testElement.style && !isMobile &&
15-
( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );
8+
export const isAndroid = /android/gi.test( UA );

0 commit comments

Comments
 (0)