Skip to content

Commit ccbe4d6

Browse files
alexgibsonalexgibson
committed
[fix bug 1122519] Remove UA detection and use feature detect for CSS line animations
1 parent 347331c commit ccbe4d6

5 files changed

Lines changed: 127 additions & 31 deletions

File tree

‎bedrock/settings/base.py‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,7 @@ def JINJA_CONFIG():
236236
'firefox_desktop': (
237237
'css/sandstone/sandstone-resp.less',
238238
'css/firefox/desktop/intro-anim.less',
239+
'css/base/svg-animation-check.less',
239240
'css/firefox/desktop/index.less',
240241
),
241242
'firefox_desktop_fast': (
@@ -314,6 +315,7 @@ def JINJA_CONFIG():
314315
'css/sandstone/sandstone-resp.less',
315316
'css/firefox/menu-resp.less',
316317
'css/base/mozilla-modal.less',
318+
'css/base/svg-animation-check.less',
317319
'css/firefox/hello/index.less',
318320
),
319321
'firefox_new': (
@@ -725,6 +727,7 @@ def JINJA_CONFIG():
725727
'js/libs/jquery.waypoints.min.js',
726728
'js/firefox/desktop/common.js',
727729
'js/firefox/desktop/speed-graph.js',
730+
'js/base/svg-animation-check.js',
728731
'js/firefox/desktop/intro-anim.js',
729732
'js/firefox/desktop/index.js',
730733
),
@@ -820,8 +823,8 @@ def JINJA_CONFIG():
820823
),
821824
'firefox_hello': (
822825
'js/firefox/australis/australis-uitour.js',
823-
'js/libs/modernizr.custom.cssanimations.js',
824826
'js/base/mozilla-modal.js',
827+
'js/base/svg-animation-check.js',
825828
'js/firefox/hello/index.js',
826829
),
827830
'firefox_hello_ie9': (

‎media/css/base/svg-animation-check.less‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// This Source Code Form is subject to the terms of the Mozilla Public
2+
// License, v. 2.0. If a copy of the MPL was not distributed with this
3+
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
4+
5+
#svg-test {
6+
visibility: hidden;
7+
height: 0;
8+
width: 0;
9+
overflow: hidden;
10+
}
11+
12+
#svg-test-circle {
13+
stroke-dasharray: 117;
14+
stroke-dashoffset: 117;
15+
-webkit-animation: svg-dash-test 0.1s linear forwards;
16+
animation: svg-dash-test 0.1s linear forwards;
17+
}
18+
19+
@-webkit-keyframes svg-dash-test {
20+
0% {
21+
stroke-dashoffset: 0;
22+
}
23+
100% {
24+
stroke-dashoffset: 0;
25+
}
26+
}
27+
28+
@keyframes svg-dash-test {
29+
0% {
30+
stroke-dashoffset: 0;
31+
}
32+
100% {
33+
stroke-dashoffset: 0;
34+
}
35+
}

‎media/js/base/svg-animation-check.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this
3+
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
// create namespace
6+
if (typeof Mozilla == 'undefined') {
7+
var Mozilla = {};
8+
}
9+
10+
/**
11+
* Feature detect for animating SVG line paths using CSS
12+
* Detection:
13+
* 1.) browser supports inline SVG
14+
* 2.) browser supports CSS animations
15+
* 3.) browser can animate stroke-dashoffset via a CSS keyframe animation
16+
*
17+
* Required less file: 'css/base/svg-animation-check.less'
18+
*/
19+
Mozilla.SVGAnimCheck = function() {
20+
if (!Mozilla.SVGAnimCheck.supportsInlineSVG() || !Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
21+
return false;
22+
} else {
23+
return Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths();
24+
}
25+
};
26+
27+
/**
28+
* Detect CSS animation support (only checks for webkit and unprefixed)
29+
*/
30+
Mozilla.SVGAnimCheck.supportsCSSAnimations = function() {
31+
var div = document.createElement('div');
32+
33+
// note we're only checking for Webkit vendor prefix as all other browsers
34+
// now support unprefixed CSS animations
35+
if (div.style.animationName !== undefined || div.style.WebkitAnimationName !== undefined) {
36+
return true;
37+
}
38+
39+
return false;
40+
};
41+
42+
/**
43+
* Detect support for inline SVG elements.
44+
*/
45+
Mozilla.SVGAnimCheck.supportsInlineSVG = function() {
46+
var div = document.createElement('div');
47+
div.innerHTML = '<svg/>';
48+
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
49+
};
50+
51+
/**
52+
* Try to animate stroke-dashoffset using CSS and then get the computed value to see if it has changed.
53+
*/
54+
Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths = function() {
55+
var div = document.createElement('div');
56+
var circle;
57+
var offset;
58+
59+
div.id = 'svg-test';
60+
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>';
61+
document.documentElement.appendChild(div);
62+
63+
// try/catch is maybe a little over cautious
64+
// but better to show the fallback than throw an exception
65+
try {
66+
circle = document.getElementById('svg-test-circle');
67+
offset = window.getComputedStyle(circle).getPropertyValue('stroke-dashoffset');
68+
69+
div.parentNode.removeChild(div);
70+
71+
// webkit & blink return a string with px value
72+
if (offset.replace(/\D/g, '') === '0') {
73+
return true;
74+
}
75+
return false;
76+
} catch(e) {
77+
div.parentNode.removeChild(div);
78+
return false;
79+
}
80+
};
81+

‎media/js/firefox/desktop/intro-anim.js‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,16 @@
22
* License, v. 2.0. If a copy of the MPL was not distributed with this
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44

5-
(function($) {
5+
(function(Mozilla, $) {
66
'use strict';
77

8-
var isIE = /MSIE/.test(navigator.userAgent);
9-
var isTrident = /Trident/.test(navigator.userAgent);
10-
var isOldOpera= /Presto/.test(navigator.userAgent);
11-
128
function cutsTheMustard() {
139
// Bug (1083079) fixed but effects Firefox 35
1410
if (window.isFirefox() && window.getFirefoxMasterVersion() === 35 && $('html').hasClass('osx')) {
1511
return false;
1612
}
1713

18-
return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
19-
}
20-
21-
function supportsInlineSVG () {
22-
var div = document.createElement('div');
23-
div.innerHTML = '<svg/>';
24-
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
14+
return Mozilla.SVGAnimCheck();
2515
}
2616

2717
if (!cutsTheMustard()) {
@@ -34,4 +24,4 @@
3424
});
3525
}
3626

37-
})(window.jQuery);
27+
})(Mozilla, window.jQuery);

‎media/js/firefox/hello/index.js‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* License, v. 2.0. If a copy of the MPL was not distributed with this
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44

5-
;(function(w, $, Modernizr) {
5+
;(function(Mozilla, w, $) {
66
'use strict';
77

88
var $w = $(w);
@@ -16,30 +16,17 @@
1616
var supportsHTML5Video = !!document.createElement('video').canPlayType;
1717
var isWideViewport = $w.width() >= 740;
1818
var mqIsWide;
19-
var isIE = /MSIE/.test(navigator.userAgent);
20-
var isTrident = /Trident/.test(navigator.userAgent);
21-
var isOldOpera= /Presto/.test(navigator.userAgent);
22-
23-
var supportsSVGAnimation = function() {
24-
return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
25-
};
26-
27-
var supportsInlineSVG = function() {
28-
var div = document.createElement('div');
29-
div.innerHTML = '<svg/>';
30-
return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg';
31-
};
3219

3320
if (isWideViewport) {
34-
if (supportsSVGAnimation()) {
21+
if (Mozilla.SVGAnimCheck()) {
3522
$w.on('load', function() {
3623
$animationStage.addClass('animate wide');
3724
});
3825
} else {
3926
$('body').addClass('no-animation');
4027
}
4128
} else {
42-
if (Modernizr.cssanimations) {
29+
if (Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
4330
$w.on('load', function() {
4431
$animationStage.addClass('animate mini');
4532
});
@@ -199,4 +186,4 @@
199186
$video.on('play', function() {
200187
w.gaTrack(['_trackEvent', '/hello interactions', 'productPage', 'PlayVideo']);
201188
});
202-
})(window, window.jQuery, window.Modernizr);
189+
})(Mozilla, window, window.jQuery);

0 commit comments

Comments
 (0)