Skip to content

Instantly share code, notes, and snippets.

View welenofsky's full-sized avatar

Justin Welenofsky welenofsky

  • Three29 / Freelance
View GitHub Profile
@BenMorel
BenMorel / viewport-units-ios.scss
Last active January 25, 2025 17:53
SCSS mixin to support vh and vw units on all iOS Safari versions. Based on an idea by Patrick Burtchaell's: https://gist.github.com/pburtchaell/e702f441ba9b3f76f587
/**
* Fix for vw, vh, vmin, vmax on iOS 7.
* http://caniuse.com/#feat=viewport-units
*
* This fix works by replacing viewport units with px values on known screen sizes.
*
* iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix.
* Target devices running iOS 8+ will incidentally execute the media query,
* but this will still produce the expected result; so this is not a problem.
@paulirish
paulirish / bling.js
Last active May 10, 2025 11:02
bling dot js
/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };
@pburtchaell
pburtchaell / styles.css
Last active February 12, 2025 08:45
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.
/**
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
*
* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
* the height of element `.foo` —which is a full width and height cover image.
*
* iOS Resolution Quick Reference: http://www.iosres.com/
*/