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

33
js/reveal.js
View File

@ -898,31 +898,12 @@ export default function( revealElement, options ) {
transformSlides( { layout: '' } ); transformSlides( { layout: '' } );
} }
else { else {
// Zoom Scaling dom.slides.style.zoom = '';
// Content remains crisp no matter how much we scale. Side dom.slides.style.left = '50%';
// effects are minor differences in text layout and iframe dom.slides.style.top = '50%';
// viewports changing size. A 200x200 iframe viewport in a dom.slides.style.bottom = 'auto';
// 2x zoomed presentation ends up having a 400x400 viewport. dom.slides.style.right = 'auto';
if( scale > 1 && Device.supportsZoom && window.devicePixelRatio < 2 ) { transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
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 +')' } );
}
} }
// Select all slides, vertical and horizontal // Select all slides, vertical and horizontal
@ -964,6 +945,8 @@ export default function( revealElement, options ) {
} }
} }
dom.viewport.style.setProperty( '--slide-scale', scale );
progress.update(); progress.update();
backgrounds.updateParallax(); backgrounds.updateParallax();

7
js/utils/device.js
View File

@ -1,5 +1,4 @@
const UA = navigator.userAgent; const UA = navigator.userAgent;
const testElement = document.createElement( 'div' );
export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) || export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS ( 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 isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );
export const isAndroid = /android/gi.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 ) );