Permalink
Browse files

[fix bug 1122519] Remove UA detection and use feature detect for CSS …

…line animations
  • Loading branch information...
1 parent 347331c commit ccbe4d6e0c6d4fcf38418c2985b8c0bc6d1ea520 @alexgibson alexgibson committed Jan 16, 2015
@@ -236,6 +236,7 @@ def JINJA_CONFIG():
'firefox_desktop': (
'css/sandstone/sandstone-resp.less',
'css/firefox/desktop/intro-anim.less',
+ 'css/base/svg-animation-check.less',
'css/firefox/desktop/index.less',
),
'firefox_desktop_fast': (
@@ -314,6 +315,7 @@ def JINJA_CONFIG():
'css/sandstone/sandstone-resp.less',
'css/firefox/menu-resp.less',
'css/base/mozilla-modal.less',
+ 'css/base/svg-animation-check.less',
'css/firefox/hello/index.less',
),
'firefox_new': (
@@ -725,6 +727,7 @@ def JINJA_CONFIG():
'js/libs/jquery.waypoints.min.js',
'js/firefox/desktop/common.js',
'js/firefox/desktop/speed-graph.js',
+ 'js/base/svg-animation-check.js',
'js/firefox/desktop/intro-anim.js',
'js/firefox/desktop/index.js',
),
@@ -820,8 +823,8 @@ def JINJA_CONFIG():
),
'firefox_hello': (
'js/firefox/australis/australis-uitour.js',
- 'js/libs/modernizr.custom.cssanimations.js',
'js/base/mozilla-modal.js',
+ 'js/base/svg-animation-check.js',
'js/firefox/hello/index.js',
),
'firefox_hello_ie9': (
@@ -0,0 +1,35 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+#svg-test {
+ visibility: hidden;
+ height: 0;
+ width: 0;
+ overflow: hidden;
+}
+
+#svg-test-circle {
+ stroke-dasharray: 117;
+ stroke-dashoffset: 117;
+ -webkit-animation: svg-dash-test 0.1s linear forwards;
+ animation: svg-dash-test 0.1s linear forwards;
+}
+
+@-webkit-keyframes svg-dash-test {
+ 0% {
+ stroke-dashoffset: 0;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes svg-dash-test {
+ 0% {
+ stroke-dashoffset: 0;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+}
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// create namespace
+if (typeof Mozilla == 'undefined') {
+ var Mozilla = {};
+}
+
+/**
+ * Feature detect for animating SVG line paths using CSS
+ * Detection:
+ * 1.) browser supports inline SVG
+ * 2.) browser supports CSS animations
+ * 3.) browser can animate stroke-dashoffset via a CSS keyframe animation
+ *
+ * Required less file: 'css/base/svg-animation-check.less'
+ */
+Mozilla.SVGAnimCheck = function() {
+ if (!Mozilla.SVGAnimCheck.supportsInlineSVG() || !Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
+ return false;
+ } else {
+ return Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths();
+ }
+};
+
+/**
+ * Detect CSS animation support (only checks for webkit and unprefixed)
+ */
+Mozilla.SVGAnimCheck.supportsCSSAnimations = function() {
+ var div = document.createElement('div');
+
+ // note we're only checking for Webkit vendor prefix as all other browsers
+ // now support unprefixed CSS animations
+ if (div.style.animationName !== undefined || div.style.WebkitAnimationName !== undefined) {
+ return true;
+ }
+
+ return false;
+};
+
+/**
+ * Detect support for inline SVG elements.
+ */
+Mozilla.SVGAnimCheck.supportsInlineSVG = function() {
+ var div = document.createElement('div');
+ div.innerHTML = '<svg/>';
+ return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
+};
+
+/**
+ * Try to animate stroke-dashoffset using CSS and then get the computed value to see if it has changed.
+ */
+Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths = function() {
+ var div = document.createElement('div');
+ var circle;
+ var offset;
+
+ div.id = 'svg-test';
+ div.innerHTML = '<svg role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"><path id="svg-test-circle" fill-opacity="0" d="M33.665530413296274,58.589001490321166C43.94406883919239,58.59306994020939,52.274,66.92651000976564,52.274,77.205C52.274,87.486,43.939,95.821,33.658,95.821C23.377000000000002,95.821,15.042000000000002,87.48599999999999,15.042000000000002,77.205C15.041,66.923,23.376,58.589,33.658,58.589" stroke="#5d7489"></path></svg>';
+ document.documentElement.appendChild(div);
+
+ // try/catch is maybe a little over cautious
+ // but better to show the fallback than throw an exception
+ try {
+ circle = document.getElementById('svg-test-circle');
+ offset = window.getComputedStyle(circle).getPropertyValue('stroke-dashoffset');
+
+ div.parentNode.removeChild(div);
+
+ // webkit & blink return a string with px value
+ if (offset.replace(/\D/g, '') === '0') {
+ return true;
+ }
+ return false;
+ } catch(e) {
+ div.parentNode.removeChild(div);
+ return false;
+ }
+};
+
@@ -2,26 +2,16 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-(function($) {
+(function(Mozilla, $) {
'use strict';
- var isIE = /MSIE/.test(navigator.userAgent);
- var isTrident = /Trident/.test(navigator.userAgent);
- var isOldOpera= /Presto/.test(navigator.userAgent);
-
function cutsTheMustard() {
// Bug (1083079) fixed but effects Firefox 35
if (window.isFirefox() && window.getFirefoxMasterVersion() === 35 && $('html').hasClass('osx')) {
return false;
}
- return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
- }
-
- function supportsInlineSVG () {
- var div = document.createElement('div');
- div.innerHTML = '<svg/>';
- return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
+ return Mozilla.SVGAnimCheck();
}
if (!cutsTheMustard()) {
@@ -34,4 +24,4 @@
});
}
-})(window.jQuery);
+})(Mozilla, window.jQuery);
@@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-;(function(w, $, Modernizr) {
+;(function(Mozilla, w, $) {
'use strict';
var $w = $(w);
@@ -16,30 +16,17 @@
var supportsHTML5Video = !!document.createElement('video').canPlayType;
var isWideViewport = $w.width() >= 740;
var mqIsWide;
- var isIE = /MSIE/.test(navigator.userAgent);
- var isTrident = /Trident/.test(navigator.userAgent);
- var isOldOpera= /Presto/.test(navigator.userAgent);
-
- var supportsSVGAnimation = function() {
- return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
- };
-
- var supportsInlineSVG = function() {
- var div = document.createElement('div');
- div.innerHTML = '<svg/>';
- return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg';
- };
if (isWideViewport) {
- if (supportsSVGAnimation()) {
+ if (Mozilla.SVGAnimCheck()) {
$w.on('load', function() {
$animationStage.addClass('animate wide');
});
} else {
$('body').addClass('no-animation');
}
} else {
- if (Modernizr.cssanimations) {
+ if (Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
$w.on('load', function() {
$animationStage.addClass('animate mini');
});
@@ -199,4 +186,4 @@
$video.on('play', function() {
w.gaTrack(['_trackEvent', '/hello interactions', 'productPage', 'PlayVideo']);
});
-})(window, window.jQuery, window.Modernizr);
+})(Mozilla, window, window.jQuery);

0 comments on commit ccbe4d6

Please sign in to comment.