The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS iOS frosted glass performance

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #161954

    Hi peeps!

    This is my first post, so please be gentle. I’m working on a small app that visualizes linear equations, and optimizing it for use on iPads. Here’s what I’ve got so far:

    Lines can be added with the plus icon; dragged up and down by dragging the cross at the middle of the line; and rotated by dragging anywhere on the line itself.

    The list looking icon in the top right pulls out a drawer. For this drawer, I’ve implemented a frosted glass effect like seen in some parts of iOS 7. It’s not necessary of course, but it’s eye candy and it was fun to implement.

    This is where I’m stuck – it’s too slow! The obvious solution is to not do this, but what fun is that? I’ve tried various tricks to improve the performance, but so far have come up empty. I’ve also tried a solution that includes javascript (i.e. rasterize the SVG to a canvas) but the performance of that was just as bad and also introduced other concerns (such as synchronization issues.)

    This is about as good as I’ve been able to make it, and I don’t know where else to go with it other than simply giving up and designing a different UI. It might come to that, but I figured I’d tap into the brain power of y’all before I resign.

    This is to help my sister in-law with her math studies, so I have been able to cut all sorts of corners. As of right now, this means the effect only works in Chrome (that I know of.) My goal is to get it performant enough to run on (the latest) iPad, and I don’t really care about other targets. This allows me to use whatever hacks are available, that might not be compatible with other browsers.

    If there’s anyone out there with any ideas, I’m all ears!


    I’d like to just mention that since I haven’t been able to improve this much, I’m considering a more drastic approach such as switching from rendering using SVG, HTML and CSS to use WebGL instead. This would essentially mean rewriting the application, something which I’m not directly opposed (it’s not big, after all) but if there’s a way to optimize the current version enough I’d rather do that.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.