use css to scale slides up in safari

This commit is contained in:
Hakim El Hattab 2016-02-29 11:31:00 +01:00
parent 191dbe68d5
commit acc40095d5
1 changed files with 24 additions and 18 deletions

View File

@ -298,30 +298,36 @@
*/ */
function checkCapabilities() { function checkCapabilities() {
features.transforms3d = 'WebkitPerspective' in document.body.style || isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( navigator.userAgent );
'MozPerspective' in document.body.style ||
'msPerspective' in document.body.style ||
'OPerspective' in document.body.style ||
'perspective' in document.body.style;
features.transforms2d = 'WebkitTransform' in document.body.style || var testElement = document.createElement( 'div' );
'MozTransform' in document.body.style ||
'msTransform' in document.body.style || features.transforms3d = 'WebkitPerspective' in testElement.style ||
'OTransform' in document.body.style || 'MozPerspective' in testElement.style ||
'transform' in document.body.style; 'msPerspective' in testElement.style ||
'OPerspective' in testElement.style ||
'perspective' in testElement.style;
features.transforms2d = 'WebkitTransform' in testElement.style ||
'MozTransform' in testElement.style ||
'msTransform' in testElement.style ||
'OTransform' in testElement.style ||
'transform' in testElement.style;
features.requestAnimationFrameMethod = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; features.requestAnimationFrameMethod = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
features.requestAnimationFrame = typeof features.requestAnimationFrameMethod === 'function'; features.requestAnimationFrame = typeof features.requestAnimationFrameMethod === 'function';
features.canvas = !!document.createElement( 'canvas' ).getContext; features.canvas = !!document.createElement( 'canvas' ).getContext;
features.touch = !!( 'ontouchstart' in window );
// Transitions in the overview are disabled in desktop and // Transitions in the overview are disabled in desktop and
// mobile Safari due to lag // Safari due to lag
features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent ); features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent );
isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( navigator.userAgent ); // 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 whitelsited browsers.
features.zoom = 'zoom' in testElement.style && !isMobileDevice &&
( /chrome/i.test( navigator.userAgent ) || /Version\/[\d\.]+.*Safari/.test( navigator.userAgent ) );
} }
@ -1592,10 +1598,10 @@
transformSlides( { layout: '' } ); transformSlides( { layout: '' } );
} }
else { else {
// Use zoom to scale up in desktop Chrome so that content // Prefer zoom for scaling up so that content remains crisp.
// remains crisp. We don't use zoom to scale down since that // Don't use zoom to scale down since that can lead to shifts
// can lead to shifts in text layout/line breaks. // in text layout/line breaks.
if( scale > 1 && !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) { if( scale > 1 && features.zoom ) {
dom.slides.style.zoom = scale; dom.slides.style.zoom = scale;
dom.slides.style.left = ''; dom.slides.style.left = '';
dom.slides.style.top = ''; dom.slides.style.top = '';