dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

21
js/reveal.js
View File

@ -897,24 +897,6 @@ export default function( revealElement, options ) {
dom.slides.style.right = '';
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%';
@ -923,7 +905,6 @@ export default function( revealElement, options ) {
dom.slides.style.right = 'auto';
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
}
}
// Select all slides, vertical and horizontal
const slides = Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
@ -964,6 +945,8 @@ export default function( revealElement, options ) {
}
}
dom.viewport.style.setProperty( '--slide-scale', scale );
progress.update();
backgrounds.updateParallax();

7
js/utils/device.js
View File

@ -1,5 +1,4 @@
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
@ -7,9 +6,3 @@ export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
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 ) );