app is slow on weaker Android devices

[mroberge]

app is slow on my phone. I heard that androids are slow with CSS transitions. Could be. The graph and map pop quickly. Replace bootstrap animations with ko.

[mroberge]

"Carousel" sliding pages move slowly. graphs appear quickly. Maps are pretty fast.

[mroberge]

Bootstrap carousel uses a transition to move the new slide in place. This animation is clunky on mobile phones that don't have enough memory to handle it. From line 5425 of bootstrap.css:

carousel-inner > .item{
  -webkit-transition: 0.6s ease-in-out left; //this is a weird order. Usually it would be property duration easingfunction delay, additional property
  transition: 0.6s ease-in-out left;
}

_INSTEAD_
you can use a transform function of some sort. This would look like this:

.carousel-inner > .item{
  transition: all ease-in-out 0.6s; //webkit is the only needed vendor prefix needed for transition.
  transform: translateX(100px); //transform needs these vendor prefixes: webkit, ms
}

There are a lot of interesting transforms that work quickly on mobile. Removing the Bootstrap carousel and replacing its "left" property with a "transformX(100%)" property will speed this up on mobile.

sources:

• speed of left vs. transform
• interesting transforms that work quickly on mobile
• A sliding transform that puts all of the 'slides' into a container and moves to the appropriate one
• A nice flip transform

[mroberge]

I tried to use the "transforms" fix described above, but this created some new problems:

• Bootstrap fires an event at the end of the transition. Earlier, I modified it to redraw the map when the transition was done. This is now broken.
• I need to figure out a good way to position the slide so that it starts from just off of the screen. This will require that I know the width of the screen, I think. So it couldn't be done with pure CSS. It would need some JS.