always use css transforms for presentation scaling (zoom has too many quirks even if it is slightly sharper on ldpi displays)
parent
918ee5610a
commit
e281b3234e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
33
js/reveal.js
33
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();
|
||||
|
||||
|
|
|
@ -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 );
|
Loading…
Reference in New Issue