snipt

Ctrl+h for KB shortcuts

Text only

Mobile: -webkit-transform translate make elements disappear on iOS5

1
2
3
Nope, actually it's the -webkit-overflow-scrolling: touch properties (wherever it is) which makes those "css translated elements" disappear.

Hope it helps someone.
https://snipt.net/embed/873afdb2a59dadeeabdea14b8e59f5bb/
/raw/873afdb2a59dadeeabdea14b8e59f5bb/
873afdb2a59dadeeabdea14b8e59f5bb
text
Text only
3
2019-04-07T21:46:34
True
False
True
Feb 12, 2014 at 11:35 AM
/api/public/snipt/113075/
mobile-webkit-transform-translate-make-elements-disappear-on-ios5
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>Nope, actually it&#39;s the -webkit-overflow-scrolling: touch properties (wherever it is) which makes those &quot;css translated elements&quot; disappear. </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a>Hope it helps someone. </span></pre></div> </td></tr></table>
css, disappear, invisible, ios, transform, translate, translate3d

Text only

Estimate Localstorage used space

1
2
3
4
5
In your console:
JSON.stringify(localStorage).length (value in bytes, so 2636625 == 2.51448 MB)

Info on quota: http://www.html5rocks.com/en/tutorials/offline/quota-research/
More on mobile: http://dev-test.nemikor.com/web-storage/support-test/
https://snipt.net/embed/17f56da2252e67448df62ae077daff23/
/raw/17f56da2252e67448df62ae077daff23/
17f56da2252e67448df62ae077daff23
text
Text only
5
2016-12-04T21:59:28
True
False
True
Feb 10, 2014 at 05:50 AM
/api/public/snipt/112324/
estimate-localstorage-used-space
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>In your console: </span><span id="L-2"><a name="L-2"></a>JSON.stringify(localStorage).length (value in bytes, so 2636625 == 2.51448 MB) </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a>Info on quota: http://www.html5rocks.com/en/tutorials/offline/quota-research/ </span><span id="L-5"><a name="L-5"></a>More on mobile: http://dev-test.nemikor.com/web-storage/support-test/ </span></pre></div> </td></tr></table>
localstorage, quota, weight

JavaScript

Cordova/AngularJS: jsHybugger protocol error

1
2
3
app.config(['$compileProvider', function($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|content):/);
}]);
https://snipt.net/embed/13f1519c9d8cd4ab08a5ef0026d01178/
/raw/13f1519c9d8cd4ab08a5ef0026d01178/
13f1519c9d8cd4ab08a5ef0026d01178
js
JavaScript
3
2016-12-30T10:46:57
True
False
True
Jan 23, 2014 at 05:29 AM
/api/public/snipt/107969/
cordovaangularjs-jshybugger-protocol-error
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nx">app</span><span class="p">.</span><span class="nx">config</span><span class="p">([</span><span class="s1">&#39;$compileProvider&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$compileProvider</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nx">$compileProvider</span><span class="p">.</span><span class="nx">aHrefSanitizationWhitelist</span><span class="p">(</span><span class="sr">/^\s*(https?|ftp|mailto|file|content):/</span><span class="p">);</span> </span><span id="L-3"><a name="L-3"></a><span class="p">}]);</span> </span></pre></div> </td></tr></table>
cordova, error, jsHybugger, phonegap, protocol

HTML

AngularJS: ng-style with variable

<div ng-style="{'background-image': 'url(' + book.cover + ')'}"></div>
https://snipt.net/embed/f361a1f79ab16a484bede2fa39b7dc22/
/raw/f361a1f79ab16a484bede2fa39b7dc22/
f361a1f79ab16a484bede2fa39b7dc22
html
HTML
1
2019-06-10T10:57:34
True
False
True
Jan 21, 2014 at 05:46 PM
/api/public/snipt/107609/
angularjs-ng-style-with-variable
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">ng-style</span><span class="o">=</span><span class="s">&quot;{&#39;background-image&#39;: &#39;url(&#39; + book.cover + &#39;)&#39;}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
angularjs, ng-style, variable

Text only

Cordova/Phonegap (iOS5, iOS6): Status bar offset problem, Webview height scrollbar

Just remove the device-height attribute on your meta viewport
https://snipt.net/embed/ef142d6f09b89dcdad66a3c70d886061/
/raw/ef142d6f09b89dcdad66a3c70d886061/
ef142d6f09b89dcdad66a3c70d886061
text
Text only
1
2017-01-01T07:48:55
True
False
True
Jan 15, 2014 at 11:27 AM
/api/public/snipt/106094/
cordovaphonegap-ios5-ios6-status-bar-offset-problem-webview-height-scrollbar
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>Just remove the device-height attribute on your meta viewport </span></pre></div> </td></tr></table>
"status bar", cordova, height, ios, phonegap, webview

Text only

Mobile: No highlight on tap

1
2
3
4
5
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; // Some browsers need it
    tap-highlight-color: rgba(0,0,0,0);
}
https://snipt.net/embed/7c51a094f561753d7fe0e40c47bf902f/
/raw/7c51a094f561753d7fe0e40c47bf902f/
7c51a094f561753d7fe0e40c47bf902f
text
Text only
5
2016-12-06T13:36:32
True
False
True
Dec 14, 2013 at 09:46 AM
/api/public/snipt/100510/
mobile-no-highlight-on-tap
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>* { </span><span id="L-2"><a name="L-2"></a> -webkit-tap-highlight-color: rgba(0,0,0,0); </span><span id="L-3"><a name="L-3"></a> -webkit-tap-highlight-color: transparent; // Some browsers need it </span><span id="L-4"><a name="L-4"></a> tap-highlight-color: rgba(0,0,0,0); </span><span id="L-5"><a name="L-5"></a>} </span></pre></div> </td></tr></table>

Text only

Mobile: Activate ios-like scroll (with momentum)

1
2
3
4
5
6
7
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;

/*
Warning:
The "-webkit-overflow-scrolling" property overrides and cancel the "overflow:hidden" property
*/
https://snipt.net/embed/b4eaa74a0f7434ecf833610cfb3b127a/
/raw/b4eaa74a0f7434ecf833610cfb3b127a/
b4eaa74a0f7434ecf833610cfb3b127a
text
Text only
7
2016-12-25T21:19:04
True
False
True
Dec 14, 2013 at 09:17 AM
/api/public/snipt/100505/
mobile-activate-ios-like-scroll-with-momentum
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>overflow-y: scroll; /* has to be scroll, not auto */ </span><span id="L-2"><a name="L-2"></a>-webkit-overflow-scrolling: touch; </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a>/* </span><span id="L-5"><a name="L-5"></a>Warning: </span><span id="L-6"><a name="L-6"></a>The &quot;-webkit-overflow-scrolling&quot; property overrides and cancel the &quot;overflow:hidden&quot; property </span><span id="L-7"><a name="L-7"></a>*/ </span></pre></div> </td></tr></table>

Text only

CSS Triangle Firefox issue

Firefox can sometimes generate a weird gradient on CSS triangles.
Replace the border-style inset by outset and you're good to go
https://snipt.net/embed/81b2b4b6a8d4440f42cd7768098b1dfe/
/raw/81b2b4b6a8d4440f42cd7768098b1dfe/
81b2b4b6a8d4440f42cd7768098b1dfe
text
Text only
2
2016-12-11T07:50:01
True
False
True
Dec 07, 2013 at 07:19 AM
/api/public/snipt/99096/
css-triangle-firefox-issue
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>Firefox can sometimes generate a weird gradient on CSS triangles. </span><span id="L-2"><a name="L-2"></a>Replace the border-style inset by outset and you&#39;re good to go </span></pre></div> </td></tr></table>
border, css, triangle