MathJax config for web, mobile, and assistive

Question

Input:

<ins class="marked-for-jax">\[
1 + 2 + 3 + \ldots + n = \frac{n(n+1)}2.
\]</ins>

MathJax Config:

MathJax.Hub.Config({
  jax: ["input/TeX", "output/HTML-CSS"],
  extensions: ["tex2jax.js"],
  messageStyle: "none",
  TeX: {
    extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"]
  }
});

MathJax output, shortened and formatted for clarity:

<p>
  <ins class="marked-for-jax">
    <span class="MathJax_Preview" style="color: inherit;"></span>
    <div class="MathJax_Display" style="text-align: center;">
      <span class="MathJax" id="MathJax-Element-2-Frame" tabindex="0" data-mathml="[mathML data here]" role="presentation" style="position: relative;">
        <nobr aria-hidden="true"><span class="math" id="MathJax-Span-12" role="math" style="width: 14.517em; display: inline-block;"><!--lots of nested spans here--></nobr>
        <span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation"><!--lots of mathML here--></span>
      </span>
    </div>
    <script <!--does not impact any output. Why is it even there at all?--> type="math/tex; mode=display" id="MathJax-Element-2">1 + 2 + 3 + \ldots + n = \frac{n(n+1)}2.</script>
  </ins>
</p>

Appearance on UIWebView. Notice that we are seeing the output twice. The first one comes from the nested spans; the second one comes from the assistive.

If I strip out the assistive one with CSS, we do indeed only see the output one time. But then VoiceOver users hear nothing. Alternatively, I could strip out the nested spans with CSS. I am suspicious of that approach because, while it would likely work on iOS, it likely would not work on all browsers. Additionally, depending on exactly how I am using the output, I may want to be able to prevent MathJax from outputting portions of what it is currently doing in the first place. For example, in some cases, I will be using the Html in a way that I can be sure will appear on iOS only. In such a case, any Html that I am stripping out with css, I would prefer not to have in the first place.

How can I get the output to make sense for both sighted and assistive users?

EDIT: I found a related question here: MathJax is duplicating my equations -- why and how can I fix this?

Further edit: I can get rid of the "seeing double" problem with the following CSS, derived from here: http://mathjax.readthedocs.org/en/latest/options/assistive-mml.html. But then I have a new problem -- VoiceOver does not speak any math.

span.MJX_Assistive_MathML {
    position:absolute!important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 1px 0 0 0!important;
    border: 0!important;
    height: 1px!important;
    width: 1px!important;
    overflow: hidden!important;
    display:block!important;
}

Answer 1

PARTIAL ANSWER was to put the following CSS in. Note that this is specific to my iOS/droid offline scenario. For those of you who have different scenarios, it may not apply. Furthermore, some things come out pretty bad. I'm not exactly happy with it.

[aria-hidden="true"] { display: none; }