Daniel Marino starzonmyarmz

Button Mixin

Usage:

@include button( $color [, $icon] )

Example:

Is this a bug or a feature?

It appears that mobile Safari and mobile Google chrome (on iPhone for clarity sake) rasterizes svg graphics used as css background images when svg graphic needs to repeat. This causes the graphic to appear blurry which is no different than serving a raster-based format (such as a png) to the browser. This occurs whether the page is served at 100% or zoomed in on page load, or zooming in after page load.

If the svg graphic does not repeat or is cut off (if the html element is not wide or tall enough to show the whole svg graphic) it is treated as vector data. This allows the image to scale without any blurring during or after page load, zoomed at 100% or more.

Here is a side by side comparison of a test page served to iOS Mobile Safari, 100% on the left, and zoomed in on the right. Note that the results are the exact same on iOS Google Chrome and if images are served as data URIs. Also not pictured, iOS Mobile Opera serves the svg graphic (in this test

	// Press space to toggle play/pause state in bandcamp
	if (window.location.host.indexOf('bandcamp.com') !== -1) {
	$(document).keyup(function(e){
	if (e.keyCode === 32) {
	$('.playbutton').click();
	}
	return false;
	});
	}

	# Require any additional compass plugins here.

	# Set this to the root of your project when deployed:
	http_path = "/"
	css_dir = "css"
	sass_dir = "sass"
	images_dir = "img"
	javascripts_dir = "js"

	# You can select your preferred output style here (can be overridden via the command line):



	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>Cube Slider · CodePen</title>

	<style>

	//Prefixes definition
	$webkit:true;
	$o:true;
	$moz:true;
	$w3:true;
	$ms:true;

	//Gradient Mixin
	@mixin gradient($mode,$direction,$from,$to,$oldDirection:null){

	/*
	* Yeah, so rake:assets:precompile will fail if this file is ascii, and something
	* it imports is utf-8. To fix it, here is a snowman: ☃ (no, really.)
	*/

	# Run Scour on a SVG file (using http://codedread.com/scour)
	function scour() {
	~/Projects/scour/scour.py --enable-comment-stripping --quiet --remove-metadata -i "$1" -o "$2"
	}

	@mixin flag-rag-right($ragClipColor, $ragShadow, $height, $width)

	background: red
	display: block
	height: $height
	position: relative
	width: $width

	&:before,
	&:after

	// Email ticket to my Wunderlist
	(function toWunderlist() {
	var title = document.title
	.replace(' - Cramer Dev', '')
	.replace('Scrum Task ', ''),
	url = document.location.href;
	$('#content').find('.contextual').prepend('<a href="mailto:me@wunderlist.com?body=' + title + ' - ' + url + '" class="to-wunderlist">Add to Wunderlist</a>');

	})();