move Safari hacks to CSS, do not optimize contrast in Chrome

dist/leaflet.css

@@ -25,7 +25,16 @@
 	   -moz-user-select: none;
 	        user-select: none;
 	-webkit-user-drag: none;
-	image-rendering:-webkit-optimize-contrast;
+	}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
 	}
 .leaflet-marker-icon,
 .leaflet-marker-shadow {

src/core/Browser.js

@@ -12,6 +12,7 @@
 	    webkit    = ua.indexOf('webkit') !== -1,
 	    phantomjs = ua.indexOf('phantom') !== -1,
 	    android23 = ua.search('android [23]') !== -1,
+	    chrome    = ua.indexOf('chrome') !== -1,
 
 	    mobile = typeof orientation !== 'undefined',
 	    msPointer = navigator.msPointerEnabled && navigator.msMaxTouchPoints && !window.PointerEvent,
@@ -40,8 +41,8 @@
 		gecko: (ua.indexOf('gecko') !== -1) && !webkit && !window.opera && !ie,
 		android: ua.indexOf('android') !== -1,
 		android23: android23,
-		chrome: ua.indexOf('chrome') !== -1,
-		safari: ua.indexOf('safari') !== -1,
+		chrome: chrome,
+		safari: !chrome && ua.indexOf('safari') !== -1,
 
 		ie3d: ie3d,
 		webkit3d: webkit3d,

src/layer/tile/GridLayer.js

@@ -200,11 +200,6 @@ L.GridLayer = L.Layer.extend({
 		front.innerHTML = '';
 
 		// hack that prevents hw layers "stretching" when loading new tiles
-		if (this._zoomAnimated && L.Browser.safari) {
-			front.style.width = '1600px';
-			front.style.height = '1600px';
-			front.style.WebkitTransformOrigin = '0 0';
-		}
 
 		if (this._zoomAnimated && e && e.hard) {
 			this._clearBgBuffer();

src/map/Map.js

@@ -435,6 +435,7 @@ L.Map = L.Evented.extend({
 			(L.Browser.touch ? ' leaflet-touch' : '') +
 			(L.Browser.retina ? ' leaflet-retina' : '') +
 			(L.Browser.ielt9 ? ' leaflet-oldie' : '') +
+			(L.Browser.safari ? ' leaflet-safari' : '') +
 			(this._fadeAnimated ? ' leaflet-fade-anim' : ''));
 
 		var position = L.DomUtil.getStyle(container, 'position');