snipt

Ctrl+h for KB shortcuts
Sign up for : store and share your own code snippets.
#138822

Text only

CSS: Flickering on animation on iOS

1
2
3
4
5
6
7
Could be fixed by:

Tips 1 - Adding -webkit-backspace-visibility: hidden to the animated element and/or its parent(s) and/or its child(ren)

Tips 2 - Adding translateZ(0) everywhere like a maniac

Tips 3 - Could be because of -webkit-scrolling-overflow ! Remove it and yey. Can't remove it ? Then remove a overflow: hidden on its parent and you should be fine.
https://snipt.net/embed/0798edb481751d69478f7c2e8bd40b5a/
https://snipt.net/raw/0798edb481751d69478f7c2e8bd40b5a/
0798edb481751d69478f7c2e8bd40b5a
text
Text only
7
2015-07-03T09:38:44
True
False
Apr 01, 2015 at 04:04 PM
/api/public/snipt/138822/
css-flickering-on-animation-on-ios-75944e62
<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 id="L-1"><a name="L-1"></a>Could be fixed by: </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a>Tips 1 - Adding -webkit-backspace-visibility: hidden to the animated element and/or its parent(s) and/or its child(ren) </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a>Tips 2 - Adding translateZ(0) everywhere like a maniac </span><span id="L-6"><a name="L-6"></a> </span><span id="L-7"><a name="L-7"></a>Tips 3 - Could be because of -webkit-scrolling-overflow ! Remove it and yey. Can&#39;t remove it ? Then remove a overflow: hidden on its parent and you should be fine. </span></pre></div> </td></tr></table>
animation, blink, crap, css, flicker
#136200

CSS

Image set Color black white

1
2
3
4
5
#image{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
	filter: gray; 
	-webkit-filter: grayscale(100%);
}
https://snipt.net/embed/aa4e5343ceb1745eac8007803dce64e6/
https://snipt.net/raw/aa4e5343ceb1745eac8007803dce64e6/
aa4e5343ceb1745eac8007803dce64e6
css
CSS
5
2015-07-01T05:08:49
True
True
Aug 21, 2014 at 04:46 AM
/api/public/snipt/136200/
image-set-color-black-white-0591ef6d
<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 id="L-1"><a name="L-1"></a><span class="nf">#image</span><span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="n">filter</span><span class="o">:</span> <span class="sx">url(&quot;data:image/svg+xml;utf8,&lt;svg xmlns=\&#39;http://www.w3.org/2000/svg\&#39;&gt;&lt;filter id=\&#39;grayscale\&#39;&gt;&lt;feColorMatrix type=\&#39;matrix\&#39; values=\&#39;0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\&#39;/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale&quot;)</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="n">filter</span><span class="o">:</span> <span class="nb">gray</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">filter</span><span class="o">:</span> <span class="n">grayscale</span><span class="p">(</span><span class="m">100%</span><span class="p">);</span> </span><span id="L-5"><a name="L-5"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, image
#135283

Text only

W3C Keyword Colors

var colors = ["aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","green","greenyellow","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"];
https://snipt.net/embed/c256caf16f701b062a6fcbe739aac7ab/
https://snipt.net/raw/c256caf16f701b062a6fcbe739aac7ab/
c256caf16f701b062a6fcbe739aac7ab
text
Text only
1
2015-07-03T01:06:15
True
False
Jun 08, 2014 at 01:19 AM
/api/public/snipt/135283/
w3c-keyword-colors-90c153dd
<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>var colors = [&quot;aliceblue&quot;,&quot;antiquewhite&quot;,&quot;aqua&quot;,&quot;aquamarine&quot;,&quot;azure&quot;,&quot;beige&quot;,&quot;bisque&quot;,&quot;black&quot;,&quot;blanchedalmond&quot;,&quot;blue&quot;,&quot;blueviolet&quot;,&quot;brown&quot;,&quot;burlywood&quot;,&quot;cadetblue&quot;,&quot;chartreuse&quot;,&quot;chocolate&quot;,&quot;coral&quot;,&quot;cornflowerblue&quot;,&quot;cornsilk&quot;,&quot;crimson&quot;,&quot;cyan&quot;,&quot;darkblue&quot;,&quot;darkcyan&quot;,&quot;darkgoldenrod&quot;,&quot;darkgray&quot;,&quot;darkgreen&quot;,&quot;darkkhaki&quot;,&quot;darkmagenta&quot;,&quot;darkolivegreen&quot;,&quot;darkorange&quot;,&quot;darkorchid&quot;,&quot;darkred&quot;,&quot;darksalmon&quot;,&quot;darkseagreen&quot;,&quot;darkslateblue&quot;,&quot;darkslategray&quot;,&quot;darkturquoise&quot;,&quot;darkviolet&quot;,&quot;deeppink&quot;,&quot;deepskyblue&quot;,&quot;dimgray&quot;,&quot;dodgerblue&quot;,&quot;firebrick&quot;,&quot;floralwhite&quot;,&quot;forestgreen&quot;,&quot;fuchsia&quot;,&quot;gainsboro&quot;,&quot;ghostwhite&quot;,&quot;gold&quot;,&quot;goldenrod&quot;,&quot;gray&quot;,&quot;green&quot;,&quot;greenyellow&quot;,&quot;honeydew&quot;,&quot;hotpink&quot;,&quot;indianred&quot;,&quot;indigo&quot;,&quot;ivory&quot;,&quot;khaki&quot;,&quot;lavender&quot;,&quot;lavenderblush&quot;,&quot;lawngreen&quot;,&quot;lemonchiffon&quot;,&quot;lightblue&quot;,&quot;lightcoral&quot;,&quot;lightcyan&quot;,&quot;lightgoldenrodyellow&quot;,&quot;lightgreen&quot;,&quot;lightgrey&quot;,&quot;lightpink&quot;,&quot;lightsalmon&quot;,&quot;lightseagreen&quot;,&quot;lightskyblue&quot;,&quot;lightslategray&quot;,&quot;lightsteelblue&quot;,&quot;lightyellow&quot;,&quot;lime&quot;,&quot;limegreen&quot;,&quot;linen&quot;,&quot;magenta&quot;,&quot;maroon&quot;,&quot;mediumaquamarine&quot;,&quot;mediumblue&quot;,&quot;mediumorchid&quot;,&quot;mediumpurple&quot;,&quot;mediumseagreen&quot;,&quot;mediumslateblue&quot;,&quot;mediumspringgreen&quot;,&quot;mediumturquoise&quot;,&quot;mediumvioletred&quot;,&quot;midnightblue&quot;,&quot;mintcream&quot;,&quot;mistyrose&quot;,&quot;moccasin&quot;,&quot;navajowhite&quot;,&quot;navy&quot;,&quot;navyblue&quot;,&quot;oldlace&quot;,&quot;olive&quot;,&quot;olivedrab&quot;,&quot;orange&quot;,&quot;orangered&quot;,&quot;orchid&quot;,&quot;palegoldenrod&quot;,&quot;palegreen&quot;,&quot;paleturquoise&quot;,&quot;palevioletred&quot;,&quot;papayawhip&quot;,&quot;peachpuff&quot;,&quot;peru&quot;,&quot;pink&quot;,&quot;plum&quot;,&quot;powderblue&quot;,&quot;purple&quot;,&quot;red&quot;,&quot;rosybrown&quot;,&quot;royalblue&quot;,&quot;saddlebrown&quot;,&quot;salmon&quot;,&quot;sandybrown&quot;,&quot;seagreen&quot;,&quot;seashell&quot;,&quot;sienna&quot;,&quot;silver&quot;,&quot;skyblue&quot;,&quot;slateblue&quot;,&quot;slategray&quot;,&quot;snow&quot;,&quot;springgreen&quot;,&quot;steelblue&quot;,&quot;tan&quot;,&quot;teal&quot;,&quot;thistle&quot;,&quot;tomato&quot;,&quot;turquoise&quot;,&quot;violet&quot;,&quot;wheat&quot;,&quot;white&quot;,&quot;whitesmoke&quot;,&quot;yellow&quot;,&quot;yellowgreen&quot;]; </span></pre></div> </td></tr></table>
W3C, colors, css, javascript
#134761

CSS

Text-indent replacement

1
2
3
4
5
6
.text-indent {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
    /*other styles then*/
}
https://snipt.net/embed/174c7f2399ae996fc6a00de53abe9415/
https://snipt.net/raw/174c7f2399ae996fc6a00de53abe9415/
174c7f2399ae996fc6a00de53abe9415
css
CSS
6
2015-07-03T07:54:09
True
False
/api/public/snipt/134761/
replacement-text-width-image-7c632551
<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="nc">.text-indent</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="k">text-indent</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="k">white-space</span><span class="o">:</span> <span class="k">nowrap</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="c">/*other styles then*/</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
-9999px, css, icons, text-indent
Copyrighted, illegal, or inappropriate content? Email nick@snipt.net.