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.
(http://dev.w3.org/csswg/css3-background/#the-background)

Then, it was applied to the Webkit several months ago.
(https://bugs.webkit.org/show_bug.cgi?id=27577)


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.

(https://bugs.webkit.org/show_bug.cgi?id=97761)


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.

   .oa_rd{position:absolute;top:8px;left:4px;width:38px;height:38px;
     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.
 <head>
  <style type="text/css">
   .dialer_num_1 {
     width:200px;
     height:121px;
     background: url(27_dialer_btn_160x97_01.png);
     background-size: 100%;
   }
  </style>
 </head>
 <body>
 <div class="dialer_num_1"
     onmouseover="style.background='url(27_dialer_btn_160x97_01_press.png)'"
     onmouseout="style.background='url(27_dialer_btn_160x97_01.png)'">
 </div>
 </body>


Thank you.
KyungTae Kim