diff --git a/src/shaded-lens/Lens.js b/src/shaded-lens/Lens.js
index 5c522249..7125a35d 100644
--- a/src/shaded-lens/Lens.js
+++ b/src/shaded-lens/Lens.js
@@ -7,13 +7,9 @@ const Lens = (props) => {
fadeDurationInMs,
isActive,
isPositionOutside,
- style: parentSpecifiedStyle,
- translateX,
- translateY
+ style: parentSpecifiedStyle
} = props;
- const translate = `translate(${translateX}px, ${translateY}px)`;
-
const defaultStyle = {
width: 'auto',
height: 'auto',
@@ -26,9 +22,6 @@ const Lens = (props) => {
const computedStyle = {
position: 'absolute',
- transform: translate,
- WebkitTransform: translate,
- msTransform: translate,
opacity: (isActive && !isPositionOutside) ? 1 : 0,
transition: `opacity ${fadeDurationInMs}ms ease-in`
};
diff --git a/src/shaded-lens/LensBottom.js b/src/shaded-lens/LensBottom.js
index bffd1221..b39e0bf6 100644
--- a/src/shaded-lens/LensBottom.js
+++ b/src/shaded-lens/LensBottom.js
@@ -23,7 +23,7 @@ const LensBottom = ({
const computedStyle = {
height: `${height}px`,
width: '100%',
- top
+ top: `${top}px`
};
return (
diff --git a/src/shaded-lens/LensLeft.js b/src/shaded-lens/LensLeft.js
index be7f9c36..54eeba67 100644
--- a/src/shaded-lens/LensLeft.js
+++ b/src/shaded-lens/LensLeft.js
@@ -19,11 +19,11 @@ const LensLeft = ({
const maxWidth = smallImage.width - clearLensWidth;
const height = clearLensHeight;
const width = clamp(position.x - cursorOffset.x, 0, maxWidth);
- const translateY = clamp(position.y - cursorOffset.y, 0, maxHeight);
+ const top = clamp(position.y - cursorOffset.y, 0, maxHeight);
const computedStyle = {
height: `${height}px`,
width: `${width}px`,
- top: '0px',
+ top: `${top}px`,
left: '0px'
};
@@ -36,8 +36,7 @@ const LensLeft = ({
{},
parentSpecifiedStyle,
computedStyle
- ),
- translateY
+ )
}}/>
);
};
diff --git a/src/shaded-lens/LensRight.js b/src/shaded-lens/LensRight.js
index 13e6b306..e210a1d4 100644
--- a/src/shaded-lens/LensRight.js
+++ b/src/shaded-lens/LensRight.js
@@ -19,11 +19,11 @@ const LensRight = ({
const maxWidth = smallImage.width - clearLensWidth;
const height = clearLensHeight;
const width = clamp(smallImage.width - position.x - cursorOffset.x, 0, maxWidth);
- const translateY = clamp(position.y - cursorOffset.y, 0, maxHeight);
+ const top = clamp(position.y - cursorOffset.y, 0, maxHeight);
const computedStyle = {
height: `${height}px`,
width: `${width}px`,
- top: '0px',
+ top: `${top}px`,
right: '0px'
};
@@ -36,8 +36,7 @@ const LensRight = ({
{},
parentSpecifiedStyle,
computedStyle
- ),
- translateY
+ )
}}/>
);
};
diff --git a/test/lens/lens.spec.js b/test/lens/lens.spec.js
index 5b8da0b3..9dace5e1 100644
--- a/test/lens/lens.spec.js
+++ b/test/lens/lens.spec.js
@@ -5,7 +5,7 @@ import Lens from '../../src/shaded-lens/Lens';
describe('Image Lens', () => {
it('applies computed style', () => {
- const expected = 'width:auto;height:auto;top:auto;right:auto;bottom:auto;left:auto;display:block;position:absolute;transform:translate(0px, 0px);-webkit-transform:translate(0px, 0px);-ms-transform:translate(0px, 0px);opacity:0;transition:opacity 0ms ease-in';
+ const expected = 'width:auto;height:auto;top:auto;right:auto;bottom:auto;left:auto;display:block;position:absolute;opacity:0;transition:opacity 0ms ease-in';
const c = render();
@@ -34,30 +34,6 @@ describe('Image Lens', () => {
expect(c.attr('style').startsWith(expected)).to.be.true;
});
- it('applies translateX and translateY props to CSS transform translate function', () => {
- const c = render(
-
- );
-
- expect(c.css('transform')).to.equal('translate(1px, 2px)');
- });
-
- it('applies vendor prefixes to inline CSS transform property', () => {
- const c = render(
-
- );
-
- expect(c.css('transform')).to.equal('translate(1px, 2px)');
- expect(c.css('-ms-transform')).to.equal('translate(1px, 2px)');
- expect(c.css('-webkit-transform')).to.equal('translate(1px, 2px)');
- });
-
it('applies a value of 0 to CSS opacity property when isActive is unset', () => {
const c = render();