always use css transforms for presentation scaling (zoom has too many quirks even if it is slightly sharper on ldpi displays)

This commit is contained in:
hakimel 2022-03-31 11:19:55 +02:00
parent 918ee5610a
commit e281b3234e
6 changed files with 13 additions and 37 deletions

2
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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();

View File

@ -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 );