Implemented fallback mode for when 3D transforms are used but not sup…

…ported by the browser

DOCUMENTATION.md

@@ -579,13 +579,24 @@ Sequence aims to work fully in the latest versions of all major browsers that su
 
 Please see the complete [list of supported browsers](https://github.com/IanLunn/Sequence/wiki/Sequence-v2-Browser-Support).
 
-In fallback mode, Sequence gives all steps a class of `animate-in` and will then restructure the canvas and steps so that they sit side-by-side, much like a traditional slider. When the user navigates between steps, the canvas is animated and moved to the relevant step. This way, the user still gets to see all of the content available in your Sequence theme, just without so many fancy effects. Where available, animation of the canvas is controlled via CSS transforms, otherwise JavaScript.
+In fallback mode, Sequence gives all steps a class of `animate-in` and will then restructure the canvas and steps so that they sit side-by-side, much like a traditional slider. When the user navigates between steps, the canvas is animated and moved to the relevant step. This way, the user still gets to see all of the content available in your Sequence theme, just without so many fancy effects. Animation of the canvas is controlled via JavaScript when in fallback mode.
 
-Internet Explorer versions 10 and 11 *do* support transitions and 2D transforms but they do not fully support 3D transforms. When [animating the canvas](#animating-the-canvas) by using 3D related data-attributes `data-sequence-z`, `data-sequence-rotate-x`, and `data-sequence-rotate-y` these browsers will rely on fallback mode.
+When in fallback mode, the Sequence container is given a class of `sequence-fallback` to allow you to change styles for a fallback theme accordingly and HTML structure is given the following styles via JavaScript:
 
-The [`require3d` option](#require3d) will determine whether a theme requires the browser to support 3D transforms automatically, but can be overridden where necessary.
+```html
+<div id="sequence" style="white-space: nowrap;">
+
+  <div class="sequence-screen" style="overflow: hidden;">
+    <ul class="sequence-canvas" style="position: relative; width: 100%; height: 100%;">
+      <li style="width: 100%; height: 100%; white-space: normal; display: inline-block; position: relative;">
+        <!-- Step 1 content here -->
+      </li>
+    </ul>
+  </div>
+</div>
+```
 
-When in fallback mode, the Sequence container is given a class of `sequence-fallback` to allow you to change styles for a fallback theme accordingly.
+In the above code example, `display: inline-block;` and `position: relative;` are only applied if self.options.fallback.layout is set to `"auto"` or `"basic"`.
 
 The [Fallback Mode has two options](#fallback-mode) which allow you to change the [speed](#speed) of navigation between steps, and its [layout](#layout).
 
@@ -595,6 +606,12 @@ Please see feature support for each individual property on [caniuse.com](http://
 - [CSS Transforms](http://caniuse.com/#search=transforms)
 - [CSS 3D Transforms (Note only partial support for IE10 and IE11)](http://caniuse.com/#feat=transforms3d)
 
+### 3D Support
+
+Internet Explorer versions 10 and 11 support transitions and 2D transforms but they do not fully support 3D transforms. When [animating the canvas](#animating-the-canvas) by using 3D related data-attributes `data-sequence-z`, `data-sequence-rotate-x`, and `data-sequence-rotate-y` these browsers will rely on fallback mode as well.
+
+The [`require3d` option](#require3d) will determine whether a theme requires the browser to support 3D transforms automatically based on the use of the above mentioned data attributes. Should you need to override this or force Internet Explorer 10 and 11 into fallback mode due to using 3D transforms elsewhere, you can set `require3d` to `true` or `false`.
+
 ## Options
 
 Sequence comes with many options that allow you to easily control its features and how it behaves.
@@ -1483,7 +1500,7 @@ Executed when Sequence is destroyed (removed from the element it is attached to
 
 - `sequence`: All properties and methods available to this instance
 
-### <a id="methods">Methods</a>
+### Methods
 
 Public methods are the functions that Sequence utilises, made available for developers to extend and enhance their particular instance.
 
@@ -1560,7 +1577,7 @@ Note: even if `autoPlay` is disabled in the options, autoPlay can still later be
 
 Remove Sequence from the element it is attached to and stop all Sequence functionality.
 
-### <a id="properties">Properties</a>
+### Properties
 
 Properties can be used to get certain information about the state of Sequence, for example, the ID of the current step.
 
@@ -1607,6 +1624,18 @@ Returns whether the browser supports CSS animations.
 
 Returns the HTML element used as Sequence's canvas.
 
+#### `container`
+
+- Type: HTMLElement
+
+Returns the HTML element used as Sequence's container.
+
+#### `currentPaginationLinks`
+
+- Type: HTMLElement Array
+
+Returns an array of the currently active HTML pagination elements
+
 #### `canvasPreviousPosition`
 
 - Type: Array
@@ -1628,12 +1657,6 @@ Returns a number representing the direction Sequence is last navigated in.
 - `1`: Forward
 - `-1`: Reverse
 
-#### `element`
-
-- Type: HTMLElement
-
-Returns the HTML element used as Sequence's container.
-
 #### `elementsAnimating`
 
 - Type: Array
@@ -1646,6 +1669,12 @@ Returns an array containing the HTML elements currently being animated by Sequen
 
 Returns an object containing the Hammer event when the `swipeNavigation` option is enabled.
 
+#### `inFallbackMode`
+
+- Type: True/False
+
+Returns true if Sequence is in [fallback mode](#browser-support-and-fallback-mode).
+
 #### `isActive`
 
 - Type: true/false
@@ -1705,6 +1734,13 @@ Returns Sequence's options - defaults combined with developer defined options.
 
 Returns an array containing the HTML elements used as Sequence's pagination.
 
+#### `paginationLinks`
+
+- Type: Array
+- Dependencies: `pagination: true` | `pagination: <CSS Selector>`
+
+Returns an array containing the HTML elements used as Sequence's individual pagination links.
+
 #### `pauseButton`
 
 - Type: Array
@@ -1725,12 +1761,23 @@ Returns an array containing the HTML elements used as Sequence's previous button
 
 Returns a number representing the step that was previously being viewed (the one before `currentStepId`).
 
+#### `screen`
+
+- Type: HTMLElement
+
+Returns the HTML element used as Sequence's screen.
+
 #### `steps`
 
 - Type: Array
 
 Returns an array containing the HTML elements used as Sequence's steps.
 
+#### `transformStyleSupported`
+
+- Type: true/false
+
+Returns whether the browser supports CSS `transform-style: preserve-3d`.
 
 #### `transitionsSupported`
 

README.md

@@ -71,47 +71,15 @@ The following is a complete list of the work still needed to be carried out to r
 - Implement AMD/Require.js support
 - Make `_getAnimationMap.destroyClone()` IE7 compatible
 - Make `_ui.getElement()` IE7 compatible
-- Implement fallback functionality for `_ui.show()` and `_ui.hide()` when the browser doesn't support CSS transitions
-- Implement fallback functionality for `_animation.moveCanvas()` when the browser doesn't support CSS transitions
 - Implement `_animation.stepSkipped()` functionality to stop a step from animating when it is skipped
-- Browser/Device Test - Sequence v2 has been developed in Firefox on a Mac. No other browsers/devices have been tested yet
+- Browser/Device Test - [See browser testing so far here](https://github.com/IanLunn/Sequence/wiki/Sequence-v2-Browser-Support)
 - [Improve Yeoman generator for Sequence](https://github.com/IanLunn/generator-sequence/issues) themes
 
 ## Browser Support
 
 When Sequence reaches beta, we aim to support current versions of all major desktop browsers, and older versions of Internet Explorer 7 onwards.
 
-The pre-alpha version has been tested and is working on the following platforms and browsers:
-
-### Mac OS X 10.9.3
-
-- Mozilla Firefox 30
-- Google Chrome 35
-- Apple Safari 7.0.4
-- Opera 22
-
-### Windows 7
-
-- Internet Explorer 11
-- ~~Internet Explorer 10~~
-- ~~Internet Explorer 9~~
-- ~~Internet Explorer 8~~
-
-### Windows Vista
-
-- ~~Internet Explorer 7~~
-
-### Apple iOS 7.1.1 (iPad & iPhone)
-
-- Apple Safari
-- Google Chrome 35
-
-### Android 4.4.2 (Nexus 7)
-
-- Firefox 23
-- Google Chrome 33
-
-
+[See the ever-growing browser support list](https://github.com/IanLunn/Sequence/wiki/Sequence-v2-Browser-Support)
 
 ## Premium Theme Partnership