title: SwiftUI iOS Widget – Image after some time gets cropped
body: <p>I am creating iOS 14+ Widget using SwiftUI and I'm facing very strange situation. Problem is that I have just one &quot;full widget&quot; image (maybe or not its worth noting that it's downloaded from the internet but in the time of displaying its already loaded and injected as <code>UIImage</code>) in my widget which is displayed correctly like that:</p>
  <p><a href="https://i.stack.imgur.com/tPcgd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tPcgd.jpg" alt="enter image description here" /></a></p>
  <p>But after some time and after some more iPhone unlocks BOOM, I get this:</p>
  <p><a href="https://i.stack.imgur.com/EOvbb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EOvbb.jpg" alt="enter image description here" /></a></p>
  <p>Few observations:</p>
  <ul>
  <li>it happens with <code>systemLarge</code> family as well - the same percentage of image's width is cropped</li>
  <li>the image is cropped horizontally always by exactly the same percentage of width</li>
  <li>when my wallpaper is other than just plain black the cropped part is filled with black color as well</li>
  <li>the cropped part is filled with black no matter what user interface style (light/dark) I have</li>
  </ul>
  <hr />
  <p>To make it easier I created minimal example which causes the error:</p>
  <p>So, I have this <code>EntryView</code></p>
  <pre class="lang-swift prettyprint-override"><code>struct EntryView: View {
  
      var viewModel: EntryViewModel
  
      var body: some View {
          Image(uiImage: image)
              .resizable()
              .scaledToFill()
      }
  }
  </code></pre>
  <p>which is used as content for <code>Widget</code> itself</p>
  <pre class="lang-swift prettyprint-override"><code>struct SomeWidget: Widget {
  
      var body: some WidgetConfiguration {
          StaticConfiguration(
              kind: xxx,
              provider: SomeWidgetTimelineProvider(xxx)
          ) { item in
              view(for: item)
          }
              .configurationDisplayName(xxx)
              .description(xxx)
              .supportedFamilies([.systemMedium, .systemLarge])
      }
  
      private func view(for item: Item) -&gt; some View {
          Group {
              switch item {
              case .aaa(let xxx):
                  EntryView(viewModel: xxx)
              case .bbb(let xxx):
                  EntryView(viewModel: xxx)
              }
          }
      }
  }
  </code></pre>
  <p>and this <code>Widget</code> is wrapped in <code>WidgetBundle</code></p>
  <pre class="lang-swift prettyprint-override"><code>@main
  struct SomeWidgets: WidgetBundle {
  
      var body: some Widget {
          SomeWidget()
          SomeWidget()
      }
  }
  </code></pre>
  <p>Maybe I should also show logic which is responsible for downloading the image. I use just simple <code>Data(contentsOf:)</code> synchronous method which is called on background queue and then I call <code>TimelineProvider</code>s callback on main queue:</p>
  <pre class="lang-swift prettyprint-override"><code>final class SomeWidgetTimelineProvider: TimelineProvider {
  
      ...
  
      func getTimeline(in context: Context, completion: @escaping (Timeline&lt;SomeEntry&gt;) -&gt; Void) {
          getSomeModel { model in
              prefetchImage(for: model) { result in
                  switch result {
                  case .success(let image):
                      completion(
                          Timeline(
                              entries: [.aaa(EntryViewModel(image: image)],
                              policy: .after(Date() + 30 * 60)
                          )
                      )
                  case .error(let error):
                      completion(
                          Timeline(
                              entries: [.bbb(xxx)],
                              policy: .after(Date() + 30 * 60)
                          )
                      )
                  }
              }
          }
      }
  
      private func prefetchImage(for model: SomeModel, completion: @escaping (Result&lt;UIImage, Error&gt;) -&gt; Void) {
          DispatchQueue.global(qos: .background).async {
              guard
                  let imageURL = URL(string: model.imageUrl),
                  let data = try? Data(contentsOf: imageURL)
              else {
                  DispatchQueue.main.async {
                      completion(.failure(xxx))
                  }
              }
              let image = UIImage(data: data)
              DispatchQueue.main.async {
                  completion(.success(image))
              }
          }
      }
  }
  </code></pre>
  <p>So my question is, is something wrong with my layout or fetching logic? What am I missing?</p>
  <p>Thank you for any help!</p>