SLy_huh SLy_huh - 29 days ago 17
CSS Question

Changing DIV size vs Change its BG size (perfomance)

So, e.g. i have a div, i need to enlarge on mouseover.
I know 2 ways to do it:


  • a)actually to enlarge the DIV

  • b)Since I've heard of JS operating with
    DOM is its main problem, it came to my mind, that we can create 2
    DIVs, 1 stands for enlarged size, 2nd for minimized, BG size of
    enlarged is equal to size of minimized DIV, e.g. 70%



On minimized DIV mouseenter - triggers function which set bg size to 100% of enlarged DIV's size

Scheme here: Bordered DIV - stands for Enlarged DIV, with 70% size of BG; minimized div has zero opacity, sized to image precisely

TL;DR



So which method is faster: operate with DIV's size itself, or operate with its css properties? Hope I describe my thoughts clear.

Answer

The most performant way for the browser is usually the css transform to make something bigger, since its hardware accelerated and doesn't conflict with the positioning of the DOM at all. it's also the easiest way to animate things :)

demo: https://jsfiddle.net/v0k69mq3/

html:

<div>foo</div>

css:

div:hover {
  transform:scale(1.5)
}
Comments