Why does simple website crash on mobile (iOS Safari and Chrome, at least)?

I think I fixed it!

The problem, as suspected, was rendering/painting caused by CSS layout. At phone-size, I had been hiding the content of each entry until it was selected; and the method I had been using to hide them, and remove any trace of them from the layout, included position: absolute. I didn't initially use display: none because of typical concerns about wanting to not see content but keep it there, for various readers and reasons. I threw those concerns aside and changed the layout so that the entries were hidden with display: none and shown with display: block -- and that seems to have fixed the crashing.

I think the absolute positioning was stacking a huge amount of content in the corner of the screen, and although it wasn't visible, it was demanding memory.

What clued me in to trying this was an answer to another related question, linked to above by @tea_totaler: https://stackoverflow.com/a/14866503/2284669. It says:

What tends to help me a lot is to keep anything that is not visible at this time under display: none. This might sound primitive but actually does the trick. It's a simple way to tell the renderer of the browser that you don't need this element at this time and therefore releases memory. This allows you to create mile long vertical scrollers with all sorts of 3d effects as long as you hide elements that you are not using at this time.

I think that my other hiding method was not releasing memory, despite its other advantages (which were possibly irrelevant to this particular site anyway). I'm sure it became a problem only because the site was so long.

That's something to consider, though, when you want to hide an element: rendering/memory demands.

On my site it was caused by elements with the css property -webkit-backface-visibility: hidden

removing this property fixed all crashes!

see iOS: Multiple divs with -webkit-backface-visibility:hidden crash browser when zooming

I ran an audit with Chrome on the site. It suggested this:

Remove unused CSS rules (44)
44 rules (10%) of CSS not used by the current page.
css-built.min.css: 10% is not used by the current page.

    audio, canvas, video      audio:not([controls])      [hidden]      abbr[title]      dfn      hr      mark      q      sub, sup      sup      sub      svg:not(:root)      figure      fieldset      legend      button[disabled], html input[disabled]      input[type=checkbox], input[type=radio]      input[type=search]      input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration      textarea      table      .older-docs      .older-docs>li      .older-docs>li:not(:last-child):after      *, :before, :after      fieldset      textarea      :not(pre)>code[class*=language-], pre[class*=language-]      :not(pre)>code[class*=language-]      .namespace      .token.regex, .token.important      .token.important      .older-docs      .changelog dt      .changelog>dt      .changelog>dt:after      .changelog>dd      .changelog-i-list      :target>.entry-body      .sub--h      .example--css.is-active      .preload .help-content-c      .help-content-c.is-active      .help-content.is-active  

The task manager on Chrome shows that the page takes up about 2x as much total memory than other sites, such as stackoverflow and dropbox. I would recommend dividing up the features into separate pages instead of one long page. By separating the features it would improve the server's efficiency and the browser's load time and memory usage. There would be less JavaScript and CSS running on each page and smaller amounts of data would be sent from the server. Having all the features on the home page is inefficient. For example, if a user only needed to look up how to make a Font Icon Label they would have to load other sections of the page that are not needed and take up memory.