Bug 155473 - Safari and Chrome for iOS fail to render jpg background images with background-size: cover;
Summary: Safari and Chrome for iOS fail to render jpg background images with backgroun...
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: Other iOS 9.2
: P2 Major
Assignee: Nobody
URL: http://gannoncurran.com/covertest/
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-03-14 16:29 PDT by gannoncurran
Modified: 2022-02-10 14:21 PST (History)
6 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description gannoncurran 2016-03-14 16:29:27 PDT 
Following FAILS to render any background image at all on both Safari (v. 601.1) and Chrome (v. 49.0.2623.73) in iOS, for both iPhone and iPad

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    .container {
      width: 100px;
      height: 100px;
      background-image: url('./images/test_bg_01.jpg');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="container">
    <p>things</p>
  </div>
</body>
</html>

But this works (image file type changed to .png):

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    .container {
      width: 100px;
      height: 100px;
      background-image: url('./images/test_bg_01.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="container">
    <p>things</p>
  </div>
</body>
</html>
Comment 1 Simon Fraser (smfr) 2016-03-16 21:11:51 PDT 
How big is the JPG? It would help if you could give a url to a live testcase or site.
Comment 2 gannoncurran 2016-03-17 09:23:26 PDT 
Seems to be related to image dimensions.
Here's a test:

gannoncurran.com/covertest/

Both images are jpgs, top is 2880 X 2200 and the bottom is 2880 X 2201
The bottom image fails to render on iPad and iPhone.


Thanks for investigating!
Comment 3 Radar WebKit Bug Importer 2016-03-29 21:36:34 PDT 
<rdar://problem/25432846>
Comment 4 Simon Fraser (smfr) 2016-07-11 18:52:14 PDT 
Oddly only seems to fail on iPad, not iPhone, and when the image is 2880x2201.
Comment 5 Simon Fraser (smfr) 2016-08-05 16:55:09 PDT 
This is a bug in a component below WebKit.
Comment 6 Brent Fulgham 2022-02-10 14:21:35 PST 
The fix for this issue was needed outside the WebKit project, therefore this is being resolved as 'Moved'.

This should now be fixed in shipping software.