Background image not showing in Safari

by

Safari has an apparent bug where it won’t show some jpg/JPEG images of a certain type in backgrounds if some criteria are met. For online use there is a type of jpg image called Progressive JPEG. Regular jpg images encode the image data from top to bottom, and you can see them load that way online. Progressive JPEG, on the other hand, encodes the image in progressively higher detail. This means that it loads fuzzy at first and then gets clearer. Some people think this looks better online, which is why it’s used. Some image optimizers will automatically make jpgs progressive for online use.

In my experience, Safari won’t display jpgs when some of the following criteria are met:

  • progressive encoding is used
  • the image is a background (for an element or the whole page)
  • the image is large (I don’t know how big exactly, but I ran into problems with images that were in the thousands of pixels wide)
  • possibly other things, I haven’t fully explored this bug

I have not been able to recreate this in any browser except Safari.

To fix this, you can either re-save the image, making sure that it isn’t in a progressive format (photoshop, etc have a selector for this), or use another format (gif, png, etc)

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Menu does not align correctly in Safari
  3. What are the steps to make a HTML design responsive? [closed]
  4. Flex / Grid layouts not working on button or fieldset elements
  5. Bootstrap row with columns of different height
  6. Vertically align an image inside a div with responsive height
  7. Grid of responsive squares
  8. Responsive grid of hexagons
  9. Responsively change div size keeping aspect ratio [duplicate]
  10. IE8 support for CSS Media Query
  11. Maintain the aspect ratio of a div with CSS
  12. Shape with a slanted side (responsive)
  13. Responsive Separator for Horizontal List
  14. Media Queries for Different zoom Levels of Browser
  15. Hiding elements in responsive layout?
  16. Mosaic of images HTML/CSS
  17. Height of flex container not working properly in Safari
  18. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  19. Responsive tables, the smart way
  20. Auto height on parent container with Absolute/Fixed Children
  21. how to make responsive website for all devices [closed]
  22. What is the best way to move an element that’s on the top to the bottom in Responsive design
  23. How do I make flex box work in safari?
  24. Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques [closed]
  25. CSS calc not working in Safari and fallback
  26. chrome/safari display border around image
  27. Load a low-res background image first, then a high-res one
  28. Select size attribute size not working in Chrome/Safari?
  29. Prevent ligatures in Safari (Mavericks/iOS7) via CSS
  30. CSS Grid Row Height Safari Bug

Leave a Comment