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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.
Everything is broken up by tag, but within each the selectors aren't particularly ordered.
I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;
| 😁 😂 😃 😄 😅 😆 😉 😊 😋 😌 😍 😏 😒 😓 😔 😖 😘 😚 😜 😝 😞 😠 😡 😢 😣 | |
| 😤 😥 😨 😩 😪 😫 😭 😰 😱 😲 😳 😵 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙅 🙆 🙇 | |
| 🙈 🙉 🙊 🙋 🙌 🙍 🙎 🙏 ✂ ✅ ✈ ✉ ✊ ✋ ✌ ✏ ✒ ✔ ✖ ✨ ✳ ✴ ❄ ❇ ❌ | |
| ❎ ❓ ❔ ❕ ❗ ❤ ➕ ➖ ➗ ➡ ➰ 🚀 🚃 🚄 🚅 🚇 🚉 🚌 🚏 🚑 🚒 🚓 🚕 🚗 🚙 | |
| 🚚 🚢 🚤 🚥 🚧 🚨 🚩 🚪 🚫 🚬 🚭 🚲 🚶 🚹 🚺 🚻 🚼 🚽 🚾 🛀 Ⓜ 🅰 🅱 🅾 🅿 | |
| 🆎 🆑 🆒 🆓 🆔 🆕 🆖 🆗 🆘 🆙 🆚 🇩🇪 🇩🇪 🇩🇪 🇬🇧 🇬🇧 🇬🇧 🇨🇳 🇨🇳 🇨🇳 🇯 | |
| 🇵 🇯🇵 🇯🇵 🇰🇷 🇰🇷 🇰🇷 🇫🇷 🇫🇷 🇫🇷 🇪🇸 🇪🇸 🇪🇸 🇮🇹 🇮🇹 🇮🇹 🇺🇸 🇺🇸 | |
| 🇺🇸 🇷🇺 🇷🇺 🇷🇺 🈁 🈂 🈚 🈯 🈲 🈳 🈴 🈵 🈶 🈷 🈸 🈹 🈺 🉐 🉑 © ® ‼ ⁉ | |
| #⃣ #⃣ #⃣ ™ ℹ ↔ ↕ ↖ ↗ ↘ ↙ ↩ ↪ ⌚ ⌛ ⏩ ⏪ ⏫ ⏬ ⏰ ⏳ ▪ ▫ ▶ | |
| ◀ ◻ ◼ ◽ ◾ ☀ ☁ ☎ ☑ ☔ ☕ ☝ ☺ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ |
| #!/bin/bash | |
| if [ "$1" = "-h" -o "$1" = "--help" ]; then cat <<EOF | |
| appify v3.0.0 for Mac OS X - http://mths.be/appify | |
| Creates the simplest possible Mac app from a shell script. | |
| Appify takes a shell script as its first argument: | |
| `basename "$0"` my-script.sh |
| #!/bin/bash | |
| if [ "$1" = "-h" -o "$1" = "--help" -o -z "$1" ]; then cat <<EOF | |
| appify v3.0.1 for Mac OS X - http://mths.be/appify | |
| Creates the simplest possible Mac app from a shell script. | |
| Appify takes a shell script as its first argument: | |
| `basename "$0"` my-script.sh |
| <!doctype html> | |
| <!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ --> | |
| <html> | |
| <head> | |
| <title>iOS 8 web app</title> | |
| <!-- CONFIGURATION --> |
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
| Device | OS | OS version | Browser | Browser version | GPU vendor | GPU renderer |
|---|---|---|---|---|---|---|
| Apple iPad 5th | iOS | 11.0.3 | Mobile Safari | 11.0 | Apple Inc. | Apple A9 GPU |
| Apple iPad Air 2 | iOS | 8.4 | Mobile Safari | 8.0 | ||
| Apple iPad Mini 3 | iOS | 8.1.2 | Mobile Safari | 8.0 | ||
| Apple iPad Pro | iOS | 11.2.1 | Mobile Safari | 11.0 | Apple Inc. | Apple A9X GPU |
| Apple iPhone 5S | iOS |
Originally based on the stock Android browser (AOSP), 2012.
"It was around early 2013 when we made [the decision to move to Chromium]. We shipped our first Chromium-based browser in one of the Galaxy S4 models released later in 2013." (Source)
