CODEWITHSUNDEEP
htmlcssgoogle-chrome
user1615837
user1615837

Reputation: 89

Chrome Background-size not accurate?

I am having an issue with background images not scaling correctly in Chrome. I have included my code below as well a codepen link. You will notice that despite being set to 20% width, the background image does fit in perfectly 5 times. Does any one have a fix or workaround for this?

CSS

    #vsb-screen-preview { 
    background-image: url(/screen-builder-screen.png); 
    background-size: 20% 25%; 
    background-position: top left; 
    float: left;   
    width: 454px; 
    height: 316px;}

    .vsb-screen-preview-bg {
    float: left; 
    overflow: hidden; 
    width: auto; 
    height: auto; 
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,1); 
    background-image: url(/pexels-photo-361951.jpeg); 
    background-size: cover; 
    background-position: center center;
    position: relative;}

HTML

    <div class="vsb-screen-preview-bg">
    <div id="vsb-screen-preview">
    </div>
    </div>

Any assistance would be greatly appreciated.

https://codepen.io/anon/pen/BWMGrz

Upvotes: 0

Views: 1041

Answers (1)

Justin Levene
Justin Levene

Reputation: 1677

The reason for this is a Chrome bug. When you set the background size, it only repeats and multiplies in integers and not decimal numbers. So if your value is a float, scale or percentage, it will be wrong in Chrome.

I've just discovered that after 2 hours of trying to figure out why chrome spacing is different.

I haven't found a fix yet apart asking for as many people as possible to report the bug so they fix it.

Upvotes: 1

Related Questions