Skip to content

Commit 9827696

Browse files
markdalgleishmarkdalgleish
committed
Fix IE background-position-x/y passthrough bug
1 parent b35cbc6 commit 9827696

6 files changed

+61
-7
lines changed

‎jquery.stellar.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888

8989
transform = vendorPrefix('transform'),
9090

91-
supportsBackgroundPositionXY = document.createElement('div').style.backgroundPositionX !== undefined,
91+
supportsBackgroundPositionXY = $('<div />').css('background-position-x') !== undefined,
9292

9393
setBackgroundPosition = (function() {
9494
return supportsBackgroundPositionXY ?
@@ -107,8 +107,8 @@
107107
return supportsBackgroundPositionXY ?
108108
function($elem) {
109109
return [
110-
$elem[0].style.backgroundPositionX,
111-
$elem[0].style.backgroundPositionY
110+
$elem.css('background-position-x'),
111+
$elem.css('background-position-y')
112112
];
113113
} :
114114
function($elem) {

‎jquery.stellar.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jquery.stellar.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979

8080
transform = vendorPrefix('transform'),
8181

82-
supportsBackgroundPositionXY = document.createElement('div').style.backgroundPositionX !== undefined,
82+
supportsBackgroundPositionXY = $('<div />').css('background-position-x') !== undefined,
8383

8484
setBackgroundPosition = (function() {
8585
return supportsBackgroundPositionXY ?
@@ -98,8 +98,8 @@
9898
return supportsBackgroundPositionXY ?
9999
function($elem) {
100100
return [
101-
$elem[0].style.backgroundPositionX,
102-
$elem[0].style.backgroundPositionY
101+
$elem.css('background-position-x'),
102+
$elem.css('background-position-y')
103103
];
104104
} :
105105
function($elem) {

‎test/jquery.stellar.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@
2121
background-attachment: fixed;
2222
}
2323

24+
#background-vertical-only span {
25+
background-position: 100% 0px;
26+
}
27+
28+
#background-horizontal-only span {
29+
background-position: 0px 100%;
30+
}
31+
2432
.offset-parent {
2533
position: absolute;
2634
top: 0;

‎test/jquery.stellar.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,20 @@ <h2 id="qunit-userAgent"></h2>
4141
<span data-stellar-ratio="1" class="ratio-1">Ratio 1</span>
4242
<span data-stellar-ratio="2" class="ratio-2">Ratio 2</span>
4343
</div>
44+
45+
<div id="background-vertical-only">
46+
<span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
47+
<span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
48+
<span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
49+
<span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
50+
</div>
51+
52+
<div id="background-horizontal-only">
53+
<span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
54+
<span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
55+
<span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
56+
<span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
57+
</div>
4458

4559
<div id="background-attachment-scroll">
4660
<span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>

‎test/jquery.stellar_test.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,38 @@
252252
}, 20);
253253
});
254254

255+
asyncTest('passes background-position-y value through when scrolling is horizontal only', 4, function() {
256+
$(window).stellar({
257+
verticalScrolling: false
258+
}).scrollTop(0).scrollLeft(20);
259+
260+
setTimeout(function() {
261+
strictEqual($('#background-horizontal-only .ratio--1').css('background-position'), '40px 100%', 'should support negative ratios');
262+
strictEqual($('#background-horizontal-only .ratio-0-5').css('background-position'), '10px 100%', 'should support ratios between 0 and 1');
263+
strictEqual($('#background-horizontal-only .ratio-1').css('background-position'), '0px 100%', 'should support ratios of 1');
264+
strictEqual($('#background-horizontal-only .ratio-2').css('background-position'), '-20px 100%', 'should support ratios greater than 1');
265+
266+
$(window).stellar('destroy').scrollTop(0).scrollLeft(0);
267+
start();
268+
}, 20);
269+
});
270+
271+
asyncTest('passes background-position-x value through when scrolling is vertical only', 4, function() {
272+
$(window).stellar({
273+
horizontalScrolling: false
274+
}).scrollTop(20).scrollLeft(0);
275+
276+
setTimeout(function() {
277+
strictEqual($('#background-vertical-only .ratio--1').css('background-position'), '100% 40px', 'should support negative ratios');
278+
strictEqual($('#background-vertical-only .ratio-0-5').css('background-position'), '100% 10px', 'should support ratios between 0 and 1');
279+
strictEqual($('#background-vertical-only .ratio-1').css('background-position'), '100% 0px', 'should support ratios of 1');
280+
strictEqual($('#background-vertical-only .ratio-2').css('background-position'), '100% -20px', 'should support ratios greater than 1');
281+
282+
$(window).stellar('destroy').scrollTop(0).scrollLeft(0);
283+
start();
284+
}, 20);
285+
});
286+
255287
module("Fixed backgrounds");
256288

257289
asyncTest('support vertical ratios correctly', 4, function() {

0 commit comments

Comments
 (0)