snipt

Ctrl+h for KB shortcuts
Notice: Snipt is moving away from free accounts on May 1st, 2014. Read more about the transition here.
#113075

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/
https://snipt.net/raw/873afdb2a59dadeeabdea14b8e59f5bb/
873afdb2a59dadeeabdea14b8e59f5bb
text
Text only
3
2014-04-16T03:54:21
True
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 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
#47725

JavaScript

extract the css transformation properties with Javascript

1
2
3
4
5
6
// src:http://stackoverflow.com/questions/3451402/how-to-extract-the-webkit-transformation-syntax-in-javascript
// credit : http://whattheheadsaid.com/
//
//
$(this).css('-webkit-transform').match(/[^()\s]+(?=,|\))/g);
// -> ["0.6", "0px", "2236px", "12deg"]
https://snipt.net/embed/6bd1edb1f8c82c7d09df91f49eeb50b9/
https://snipt.net/raw/6bd1edb1f8c82c7d09df91f49eeb50b9/
6bd1edb1f8c82c7d09df91f49eeb50b9
js
JavaScript
6
2014-04-16T15:36:10
True
False
Sep 27, 2012 at 12:51 PM
/api/public/snipt/47725/
extract-the-css-transformation-properties-with-javascript
<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></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="c1">// src:http://stackoverflow.com/questions/3451402/how-to-extract-the-webkit-transformation-syntax-in-javascript</span> </span><span id="L-2"><a name="L-2"></a><span class="c1">// credit : http://whattheheadsaid.com/</span> </span><span id="L-3"><a name="L-3"></a><span class="c1">//</span> </span><span id="L-4"><a name="L-4"></a><span class="c1">//</span> </span><span id="L-5"><a name="L-5"></a><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;-webkit-transform&#39;</span><span class="p">).</span><span class="nx">match</span><span class="p">(</span><span class="sr">/[^()\s]+(?=,|\))/g</span><span class="p">);</span> </span><span id="L-6"><a name="L-6"></a><span class="c1">// -&gt; [&quot;0.6&quot;, &quot;0px&quot;, &quot;2236px&quot;, &quot;12deg&quot;]</span> </span></pre></div> </td></tr></table>
"css transform", css3, javascript, js, regex, rotate, rotateX, rotateY, scaleX, scaleY, transform, translate, translateX, translateY
#17777

CSS

CSS transforms

Transforms
http://slides.html5rocks.com/#slide43
https://snipt.net/embed/98b52d77bc2c8c85d6af0514bb00aa43/
https://snipt.net/raw/98b52d77bc2c8c85d6af0514bb00aa43/
98b52d77bc2c8c85d6af0514bb00aa43
css
CSS
2
2014-04-13T08:05:19
True
False
/api/public/snipt/17777/
css-transforms
<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 id="L-1"><a name="L-1"></a><span class="nt">Transforms</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">http</span><span class="o">://</span><span class="nt">slides</span><span class="nc">.html5rocks.com</span><span class="o">/</span><span class="nf">#slide43</span> </span></pre></div> </td></tr></table>
css, transform
#3055

Bash

picture mover one-liner

/bin/ls -1 *.jpg | tar -cf - --files-from=- --transform 's#^\(\([^_][^_]*\)_\([^_][^_]*\)_\([0-9][0-9]\)\([0-9][0-9]\)\([0-9][0-9][0-9][0-9]\).*\)#\6/\4/\5/\1#'  | (cd Destdir/ ; tar -xf - )
https://snipt.net/embed/2f93764400ce9d5fa451526c7a02816e/
https://snipt.net/raw/2f93764400ce9d5fa451526c7a02816e/
2f93764400ce9d5fa451526c7a02816e
bash
Bash
2
2014-04-17T05:01:24
True
False
/api/public/snipt/3055/
picture-mover-one-liner
<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 id="L-1"><a name="L-1"></a>/bin/ls -1 *.jpg <span class="p">|</span> tar -cf - --files-from<span class="o">=</span>- --transform <span class="s1">&#39;s#^\(\([^_][^_]*\)_\([^_][^_]*\)_\([0-9][0-9]\)\([0-9][0-9]\)\([0-9][0-9][0-9][0-9]\).*\)#\6/\4/\5/\1#&#39;</span> <span class="p">|</span> <span class="o">(</span><span class="nb">cd </span>Destdir/ <span class="p">;</span> tar -xf - <span class="o">)</span> </span></pre></div> </td></tr></table>
bash, date, directories, files, move, sed, tar, transform