Lydia soulreverie

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	/**
	* 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/
	*/

	#!/bin/bash

	# This script assumes you have ssh access to a remote server
	# Both databases are backed up to sql files in the same directory
	# this script is executed from.
	# Usage:
	# 1. Make sure this file is executable with `chmod +x mysqlsync`
	# 2. Set the credentials for the variables at the top
	# (Remember, no spaces around the '=' sign)
	# 3. Run it from a directory where you'd like the backup files to go:

	// Native selectors.
	(function(window, document) {
	'use strict';

	var noop = function() {
	};

	// DOCUMENT LOAD EVENTS
	// not needed at the bottom of the page
	document.addEventListener('DOMContentLoaded', noop);

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Site Title</title>

	<link rel="stylesheet" href="/assets/css/style.min.css">

	// improved drags function, replace it in your code
	function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
	var $ = jQuery;

	dragElement.on('mousedown vmousedown', function (e) {
	dragElement.addClass('cd-draggable');
	resizeElement.addClass('cd-resizable');

	var dragWidth = dragElement.outerWidth(),
	xPosition = dragElement.offset().left + dragWidth - e.pageX,

	<script>
	(function (url) {
	var id = 'svg-sprite';
	var container;
	var xhr = new XMLHttpRequest();
	var body = document.body;

	if ('withCredentials' in xhr) {
	xhr.withCredentials;
	xhr.open('GET', url, true);

	<?php
	function change_acf_color_picker() {

	$client_colors = array(
	"#DD3333",
	"#81D742",
	"#1E73BE",
	"#8224E3",
	"#DD9933",
	"#EEEE22"

	// Conversion of svg4Everybody into angular format by Bill Chen
	// https://github.com/jonathantneal/svg4everybody

	(function() {
	'use strict';

	angular.module('webApp')
	.directive('use', svgEmbed);

	svgEmbed.$inject = ['$http'];

	// detect IE
	var IEversion = detectIE();

	if (IEversion !== false) {
	// document.getElementById('result').innerHTML = 'IE ' + IEversion;
	document.getElementsByTagName("body")[0].classList.add("ie");
	document.getElementsByTagName("body")[0].classList.add("ie" + IEversion);
	} else {
	// document.getElementById('result').innerHTML = 'NOT IE';
	}