CODEWITHSUNDEEP
cssiphonegoogle-chromegoogle-chrome-devtools
zipzit
zipzit

Reputation: 3997

Background Image -- Chrome Dev Tools Mobile Emulator Doesn't Match Actual Device (iPhone)

Weird problem: I'm working on a bootstrap responsive site, and using the Chrome Developer Tools Device Emulator to see how things look. Unfortunately, what I see on Chrome Devtools doesn't look at all like what I see on an actual mobile phone.

iPhone5 screen shot

For some reason, my background images aren't propagating correctly. The defect is noted on four of the five slides on that home page. 

<div id="slide-2m" class="gf_mobile" style=" height: 100%; margin: 0 auto; 
            overflow: hidden; background-color: white;
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/oranges_mobile.png);
            background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; padding: 40px 0;" >
    <div style="height: 100%; overflow: hidden; margin-top: 20%;" >
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/who_we_are_text_883x862.png" style="width: auto; height: 55vh;">
    </div>
    <div style="height: 100%; overflow: hidden; margin-top: -300px;">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/includes/images/sqf_logo_883x862.png" style="width: auto; height: 55vh; ">
    </div>
</div>

Hmm.. I'm wondering if its either the use of vh (view port units?) or perhaps the dual use of background-color: white; and background-image: (I'm using a .png with transparent background, so I need the white in there.) ?

So the obvious question is, why doesn't the emulator accurately match the actual mobile device? Is that a bug in the Chrome Developer Tools?

AAAAAaarggh! I just tested the same site with a Samsung Galaxy S5 with Chrome browser, and it looks same as the Chrome Browser Emulator. Perfect! So... does that mean Chrome error'd in the details of its iPhone simulator (or ... is Apple at fault here?)

Note: And yes, I'm aware of the issues involving mobile (visual viewport vs layout viewport) ref: A Tale of Two Viewports.

I'm going to attempt to convert all vh's and vw's over to pixels and then retest. But I'm still baffled why the difference in the emulator. Again, should this be a bug submission, and to whom.. Apple or Chrome folks?

Update: I'm working on converting all VW and VH's to pixels but so far on a screen by screen basis, that is a fail. I'm really thinking this has something to do with CSS and background-size and background-location. Look at the background image on this slide, emulator vs iphone.

Second screen image

<div id="slide-4m"  class="gf_mobile" style=" height: 100%; margin: 0 auto; overflow: 
            hidden; background-color: white;
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/includes/images/farm_field_1018x474.jpg);
            background-repeat: no-repeat; background-position: center center; background-attachment: fixed; 
            background-size: cover; padding: 40px 0;" >

One more thing I just now noticed: I've set up background-attachment: fixed; and that's how they work on the emulator. On the Samsung, I can see the backgrounds on all the five slides but they DO SCROLL. On the iPhone, I can't see the background on most of the slides. The whole thing is odd.

Oops: Background-fixed, not so hot on mobile...

Upvotes: 2

Views: 3437

Answers (2)

zipzit
zipzit

Reputation: 3997

Ugh. The answer is to not use background-attachment: fixed; for mobile.

ref: How to replicate background-attachment fixed on iOS and Fixed background image with ios7

Hmmm.. Should the dev tools emulator help you on that topic? Should that be a suggested feature to Google Chrome team?

Upvotes: 2

thomasfuchs
thomasfuchs

Reputation: 1

Safari on the iPhone has certain size limits for images (JPG up to 32 megapixels, GIF/PNG 3-5 megapixels depending on device).

Can you try using a different, smaller (in resolution) image for the background image?

Upvotes: 1

Related Questions