Fix for column rendering in Safari (#614)

* Fix for column rendering in Safari

* Set body to display inline in Columns css

examples/spreads.html

@@ -18,9 +18,12 @@
   <a id="next" href="#next" class="arrow">›</a>
 
   <script>
-    var currentSectionIndex = 0;
+    var params = new URLSearchParams(document.location.search.substring(1));
+    var url = params && params.get("url") && decodeURIComponent(params.get("url"));
+    var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : 0;
+
     // Load the opf
-    var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
+    var book = ePub(url || "https://s3.amazonaws.com/moby-dick/moby-dick.epub");
     var rendition = book.renderTo("viewer", {
       width: "100%",
       height: 600
@@ -64,7 +67,8 @@
     rendition.on("rendered", function(section){
       var nextSection = section.next();
       var prevSection = section.prev();
-      var current = book.navigation.get(section.href);
+
+      var current = book.navigation && book.navigation.get(section.href);
 
       if (current) {
         title.textContent = current.label;

src/contents.js

@@ -185,7 +185,15 @@ class Contents {
 		var _width, _height, _scale, _minimum, _maximum, _scalable;
 		var width, height, scale, minimum, maximum, scalable;
 		var $viewport = this.document.querySelector("meta[name='viewport']");
-		var newContent = "";
+		var parsed = {
+			"width": undefined,
+			"height": undefined,
+			"scale": undefined,
+			"minimum": undefined,
+			"maximum": undefined,
+			"scalable": undefined
+		};
+		var newContent = [];
 
 		/*
 		* check for the viewport size
@@ -199,37 +207,42 @@ class Contents {
 			let _minimum = content.match(/minimum-scale\s*=\s*([^,]*)/g);
 			let _maximum = content.match(/maximum-scale\s*=\s*([^,]*)/g);
 			let _scalable = content.match(/user-scalable\s*=\s*([^,]*)/g);
-			if(_width[1]){
+			if(_width && _width.length && typeof _width[1] !== "undefined"){
-				width = _width[1];
+				parsed.width = _width[1];
 			}
-			if(_height[1]){
+			if(_height && _height.length && typeof _height[1] !== "undefined"){
-				height = _height[1];
+				parsed.height = _height[1];
 			}
-			if(_scale[1]){
+			if(_scale && _scale.length && typeof _scale[1] !== "undefined"){
-				scale = _scale[1];
+				parsed.scale = _scale[1];
 			}
-			if(_minimum[1]){
+			if(_minimum && _minimum.length && typeof _minimum[1] !== "undefined"){
-				minimum = _minimum[1];
+				parsed.minimum = _minimum[1];
 			}
-			if(_maximum[1]){
+			if(_maximum && _maximum.length && typeof _maximum[1] !== "undefined"){
-				maximum = _maximum[1];
+				parsed.maximum = _maximum[1];
 			}
-			if(_scalable[1]){
+			if(_scalable && _scalable.length && typeof _scalable[1] !== "undefined"){
-				scalable = _scalable[1];
+				parsed.scalable = _scalable[1];
 			}
 		}
 
 		if (options) {
-
+			if (options.width || parsed.width) {
-			newContent += "width=" + (options.width || width);
+				newContent.push("width=" + (options.width || parsed.width));
-			newContent += ", height=" + (options.height || height);
-			if (options.scale || scale) {
-				newContent += ", initial-scale=" + (options.scale || scale);
 			}
-			if (options.scalable || scalable) {
+
-				newContent += ", minimum-scale=" + (options.scale || minimum);
+			if (options.height || parsed.height) {
-				newContent += ", maximum-scale=" + (options.scale || maximum);
+				newContent.push("height=" + (options.height || parsed.height));
-				newContent += ", user-scalable=" + (options.scalable || scalable);
+			}
+
+			if (options.scale || parsed.scale) {
+				newContent.push("initial-scale=" + (options.scale || parsed.scale));
+			}
+			if (options.scalable || parsed.scalable) {
+				newContent.push("minimum-scale=" + (options.scale || parsed.minimum));
+				newContent.push("maximum-scale=" + (options.scale || parsed.maximum));
+				newContent.push("user-scalable=" + (options.scalable || parsed.scalable));
 			}
 
 			if (!$viewport) {
@@ -238,7 +251,7 @@ class Contents {
 				this.document.querySelector("head").appendChild($viewport);
 			}
 
-			$viewport.setAttribute("content", newContent);
+			$viewport.setAttribute("content", newContent.join(", "));
 		}
 
 
@@ -316,7 +329,6 @@ class Contents {
 			};
 
 			this.pane && this.pane.render();
-
 			this.emit("resize", this._size);
 		}
 
@@ -699,7 +711,7 @@ class Contents {
 		// Deal with Mobile trying to scale to viewport
 		this.viewport({ width: width, height: height, scale: 1.0, scalable: "no" });
 
-		// this.overflowY("hidden");
+		this.css("display", "inline-block"); // Fixes Safari column cut offs
 		this.css("overflow-y", "hidden");
 		this.css("margin", "0", true);
 		this.css("padding", "0", true);

src/managers/continuous/index.js

@@ -113,6 +113,7 @@ class ContinuousViewManager extends DefaultViewManager {
 
 		this._stageSize = this.stage.size(width, height);
 		this._bounds = this.bounds();
+		console.log("set bounds", this._bounds);
 
 		// Update for new views
 		this.viewSettings.width = this._stageSize.width;
@@ -275,7 +276,7 @@ class ContinuousViewManager extends DefaultViewManager {
 		var offset = horizontal ? this.scrollLeft : this.scrollTop;
 		var visibleLength = horizontal ? bounds.width : bounds.height;
 		var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
-
+		console.log(bounds);
 		if (offset + visibleLength + delta >= contentLength) {
 			last = this.views.last();
 			next = last && last.section.next();

src/managers/helpers/stage.js

@@ -187,11 +187,11 @@ class Stage {
 	}
 
 	bounds(){
-
+		let box = this.container && this.container.getBoundingClientRect();
-		if(!this.container) {
+		if(!box || !box.width || !box.height) {
 			return windowBounds();
 		} else {
-			return this.container.getBoundingClientRect();
+			return box;
 		}
 
 	}

src/utils/core.js

@@ -475,7 +475,8 @@ export function querySelectorByType(html, element, type){
 	if(!query || query.length === 0) {
 		query = qsa(html, element);
 		for (var i = 0; i < query.length; i++) {
-			if(query[i].getAttributeNS("http://www.idpf.org/2007/ops", "type") === type) {
+			if(query[i].getAttributeNS("http://www.idpf.org/2007/ops", "type") === type ||
+				 query[i].getAttribute("epub:type") === type) {
 				return query[i];
 			}
 		}