From 8e5c04140f1a09be10196c946ccebde6deaa59d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 27 Aug 2015 18:11:47 +0200
Subject: [PATCH] add vendor prefixes for slide container

---
 .../ascribe_slides_container/slides_container.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js
index 4ac4d57a..8b098ef6 100644
--- a/js/components/ascribe_slides_container/slides_container.js
+++ b/js/components/ascribe_slides_container/slides_container.js
@@ -241,6 +241,16 @@ let SlidesContainer = React.createClass({
     },
 
     render() {
+
+        let translateXValue = 'translateX(' + (-1) * this.state.containerWidth * this.state.slideNum + 'px)';
+
+        /*
+            According to the react documentation,
+            all browser vendor prefixes need to be upper cases in the beginning except for
+            the Microsoft one *bigfuckingsurprise*
+            https://facebook.github.io/react/tips/inline-styles.html
+        */
+
         return (
             <div
                 className="container ascribe-sliding-container-wrapper"
@@ -250,7 +260,11 @@ let SlidesContainer = React.createClass({
                     className="container ascribe-sliding-container"
                     style={{
                         width: this.state.containerWidth * this.customChildrenCount(),
-                        transform: 'translateX(' + (-1) * this.state.containerWidth * this.state.slideNum + 'px)'
+                        transform: translateXValue,
+                        WebkitTransform: translateXValue,
+                        MozTransform: translateXValue,
+                        OTransform: translateXValue,
+                        mstransform: translateXValue
                     }}>
                     <div className="row">
                         {this.renderChildren()}