I made a simple nixie clock html app and wrap it in a WebView to use on android. No fancy stuff. Just one HTML file, a JS file and a css file (and ten digit images).
After a couple of hours there are stripes in the center of the screen (where the animation is and beyond) and the screen is completely unreadable. Also the menu is 'damaged' because a portion of the screen is corrupted. See picture below (excuses for the bad quality of these pictures = webcam):
Is this a known bug? After a restart of the app everything shows up normal again.
The device I'm using is an Samsung Galaxy S3 GT-I9300 running on Android 4.3 I9300BUUGNF1
To animate the numbers I created a script that sets a class on the container with 10 digits in it to show one number. All images are completely transparant (opacity:0) when no class is set. This is because I'm using an ease transition of 250ms to give it a nice in-out fade (to opacity:1).
Is there a problem with using CSS3 features? This is the css:
.nixie,.clock { position:fixed; width:80%; height:80%; text-align:center; margin:0 10%; }
.clock { top:36px; }
.clock .digit { display:inline-block; min-height:800px; width:12.2%; margin-top:8%; padding:0; font-size:0; overflow:hidden; background:#000 url(../img/nixietube.png) top center no-repeat; background-size:100%; }
.clock .digit img { opacity:0; position:absolute; width:12%; margin-left:-2.4%; margin-top:0.2%; }
.clock .digit img.dot { margin-left:1.8%; margin-top:-0.2%; }
body.seg6 .clock .digit.seg8 { display:none; }
body.seg6 .clock .digit { width:16.6%; margin:0; margin-top:8%; }
body.seg6 .clock .digit img { width:16%; margin-top:0; margin-left:-3.2%; }
body.seg6 .clock .digit img.dot { margin-left:1.8%; margin-top:-0.1%; }
.clock .digit.d0 img.d0,
.clock .digit.d1 img.d1,
.clock .digit.d2 img.d2,
.clock .digit.d3 img.d3,
.clock .digit.d4 img.d4,
.clock .digit.d5 img.d5,
.clock .digit.d6 img.d6,
.clock .digit.d7 img.d7,
.clock .digit.d8 img.d8,
.clock .digit.d9 img.d9,
.clock .digit.dot img.dot,
.clock .digit.slash img.slash { opacity:1; -moz-transition: all 250ms ease; }
Any ideas?