Friday, April 22, 2016

Too large images and not setting image size dimensions in CSS/HTML can destroy your web page

If you serve too big images (i.e. 2000x5000px), your mobile site could start showing white screen all the time. Also, flicker might seen as well.

Another potentital cause of flicker and white screen in mobile sites is not setting image dimensions in css or html (relying on max-width / max-height).

Transparent images can also cause choppy behavior of scrolling!7


CONFIRMED: Too large image dimensions, converted to smaller dimensions just by css / html attributes generate choppy scrolling experience, at least in chrome. Just replace with smaller images to solve it.

Regarding, choppy scroll of fixed elements in Chrome (a separate scrolling issue), this css can help a bit (apply to fixed element):

#header-wrap{

   backface-visibility: hidden;
   -webkit-transform:translateZ(0);
   transform:translateZ(0);
   -webkit-backface-visibility: hidden;

   background-repeat: no-repeat;
   will-change:transform, position;


}


No comments:

Post a Comment

Ubuntu 12.04, 14.04, 16.04 - auto start an app or script before login

To run a command or application at startup, even before the user has logged in, you can use this file: /etc/rc.local The commands entered...