I'm using d3.js with the ionic framework for a mobile game.
however the screen is not repainting - only in chrome. Safari and Canary (42.0.23) are ok, but chrome (40.0.22) and mobile android browser are broken.
It seems to be some conflict between D3 and ionic's CSS, removing ionic and d3 now runs ok.
I had the problem with svg version before, but now I'm just using a d3 DOM renderer, but same problem. I was wondering what might cause this, and whether ionic or d3 needs to be modified? Since it's OK in Canary maybe I can just wait for updates to fix it, but the fact mobile chrome is broken is more worrying.
Manually resizing the window in chrome will force a repaint and I can see the game then. However trying these type of techniques to trigger a repaint from JS doesn't work.
What CSS properties could cause repaint to be suppressed? I guess it's something applied to the body or html tag that's breaking repaint and d3.
a demo of the game is here:
http://chatu.meteor.com/pairs/ant1
and screenshots/details on a bug report to the ionic guys here. https://github.com/driftyco/ionic/issues/3159
Ionic seems to apply this css to the body:
element.style {
}
body, .ionic-body {
-webkit-touch-callout: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
margin: 0;
padding: 0;
color: #000;
word-wrap: break-word;
font-size: 14px;
font-family: "Helvetica Neue","Roboto",sans-serif;
line-height: 20px;
text-rendering: optimizeLegibility;
-webkit-backface-visibility: hidden;
-webkit-user-drag: none;
}
body {
margin: 0;
line-height: 1;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, fieldset, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font: inherit;
font-size: 100%;
}
