Hi all,


What I want to suggest is how about not to initialize background-size
when the background shorthand doesn't include it.


The 'background-size' attribute was added to the background shorthand by CSS3 spec.

Then, it was applied to the Webkit several months ago.

However, many legacy sites set background-size first and then set background for setting other background attributes.
In these cases, the 'background-size' is initiaized, and the backgrounds become weird.


So, for backward-compatibility, if 'background' shorthand have no 'background-size' attribute,
not to initialize the 'background-size' seems better.


I also suggested that to the Webkit bugzilla as below, but it's an issue that the CSS spec need to change first.


There are some example legacy sites:

1) http://book.coforward.com/sample/css3/12_css3_background-size.html
   The web page author want to show 5 different 'background-size' attributes,
   but if you see it on a newest Chrome, all the 5 looks same.

   With the CSS below, the author want the element <div id="exampleSub"><div id="box_abs">

   have the background-size "50px 50px", but it was overwritten with initial value by the 'background'.

   #exampleSub div {
     background: url(img/photo3.gif) right bottom no-repeat;
   #box_abs {
     background-size: 50px 50px;


2) http://m.map.naver.com/map.nhn
   When connect with mobile device with -webkit-min-device-pixel-ratio:2,
   the icon images looks wierd.
   The styles for control buttons are like below.
   On mobile device that have '-webkit-min-device-pixel-ratio:2',
   the 2nd style overwrites the background-size with an initial value.

     background:url(http://static.naver.net/m/region/im/sp_oa_v1.png) no-repeat -60px 0;
     background-size:300px 180px
   @media screen and (-webkit-min-device-pixel-ratio:2){
     .oa_rd{background:url(http://static.naver.net/m/region/im/sp_oa_v2.png) no-repeat -60px 0}


3) http://m.pornhub.com (CAUTION:It's adult site)
   When select "full version" with mobile device with -webkit-min-device-pixel-ratio:2,
   the menu icons looks wierd. (same case with the case 2)


4) Many sites writes button images that the images are changed with mouse-over action like below.
   If the background size is different with the object size, it became wired after mouse-over.
  <style type="text/css">
   .dialer_num_1 {
     background: url(27_dialer_btn_160x97_01.png);
     background-size: 100%;
 <div class="dialer_num_1"

Thank you.
KyungTae Kim