Make slides full width, set some overflows, closes imakewebthings#72

boseymour · Mar 28, 2012 · 4f6fb4c · 4f6fb4c
1 parent c77cfb7
commit 4f6fb4c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -31,6 +31,8 @@ There is an issue with certain builds of Chrome that result in a solid blue back
 - Disable hardware compositing by setting `--disable-accelerated-compositing` in the Chrome loading options
 - Replace instances of `translate3d` with `translate` in the CSS of your decks (though this will slow down performance on iOS devices and Safari.)
 
+Firefox contains a bug that allows users to scroll horizontally using the trackpad despite `overflow-x:hidden`. ([Bug 664275](https://bugzilla.mozilla.org/show_bug.cgi?id=664275) and [Bug 325942](https://bugzilla.mozilla.org/show_bug.cgi?id=325942).) If anyone knows of any workarounds to this issue please contact me.
+
 ## Printing
 
 Core includes stripped down black and white print styles for the standard slide template that is suitable for handouts.

diff --git a/core/deck.core.css b/core/deck.core.css
@@ -2,10 +2,13 @@ html {
   height: 100%;
 }
 
+body.deck-container {
+  overflow-y: auto;
+}
+
 .deck-container {
   position: relative;
   height: 100%;
-  width: 70%;
   margin: 0 auto;
   padding: 0 48px;
   font-size: 16px;
@@ -22,6 +25,7 @@ html {
 }
 .touch .deck-container {
   -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
 }
 .deck-container div, .deck-container span, .deck-container object, .deck-container iframe,
 .deck-container h1, .deck-container h2, .deck-container h3, .deck-container h4, .deck-container h5, .deck-container h6, .deck-container p, .deck-container blockquote, .deck-container pre,
@@ -298,10 +302,6 @@ html {
   visibility: visible;
 }
 
-body.deck-container {
-  overflow: visible;
-}
-
 @media screen and (max-device-width: 480px) {
   /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
 }

diff --git a/core/deck.core.scss b/core/deck.core.scss
@@ -2,10 +2,13 @@ html {
 	height:100%;
 }
 
+body.deck-container {
+	overflow-y:auto;
+}
+
 .deck-container {
 	position:relative;
 	height:100%;
-	width:70%;
 	margin:0 auto;
 	padding:0 48px;
 	font-size:16px;
@@ -22,6 +25,7 @@ html {
 
 	.touch & {
 		-webkit-text-size-adjust:none;
+		-moz-text-size-adjust:none;
 	}
 
 	/* Resets and base styles from HTML5 Boilerplate */
@@ -362,10 +366,6 @@ html {
 	}
 }
 
-body.deck-container {
-	overflow:visible;
-}
-
 @media all and (orientation:portrait) {
 
 }