gatsby-image fluid queries with maxWidth not displaying large portrait oriented images

[wwrightiv]

Description

I'm using contentful for my data. I have a fluid image query that works fine, but if I set a maxWidth on the query, some of my portrait oriented images do not appear on the UI until the screen is scaled down. This only affects portrait images, and only happens if I set a maxWidth above 1000 or so. I've been pulling my hair out over this for a week or so. If I don't set a maxWidth on the query, the images display fine, but they default to a small resolution. Is there something I'm missing here?

Here's the query, which works fine in the graphIQL playground

Here's where I'm using the gatsby-image Img component

Environment

System:
OS: macOS 10.14
CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 70.0.3538.102
Firefox: 63.0.1
Safari: 12.0
npmPackages:
gatsby: ^2.0.50 => 2.0.50
gatsby-cli: ^2.4.5 => 2.4.5
gatsby-image: ^2.0.20 => 2.0.20
gatsby-plugin-canonical-urls: ^2.0.5 => 2.0.7
gatsby-plugin-feed: ^2.0.5 => 2.0.9
gatsby-plugin-google-analytics: ^2.0.6 => 2.0.7
gatsby-plugin-manifest: ^2.0.2 => 2.0.9
gatsby-plugin-netlify: ^2.0.0 => 2.0.5
gatsby-plugin-nprogress: ^2.0.5 => 2.0.6
gatsby-plugin-offline: ^2.0.5 => 2.0.15
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.2
gatsby-plugin-sharp: ^2.0.12 => 2.0.12
gatsby-plugin-sitemap: ^2.0.1 => 2.0.2
gatsby-plugin-styled-components: ^3.0.0 => 3.0.2
gatsby-remark-images-contentful: ^2.0.0 => 2.0.3
gatsby-remark-prismjs: ^3.0.0 => 3.0.3
gatsby-source-contentful: ^2.0.14 => 2.0.14
gatsby-source-filesystem: ^2.0.1 => 2.0.8
gatsby-transformer-remark: ^2.1.3 => 2.1.12
gatsby-transformer-sharp: ^2.1.8 => 2.1.8
npmGlobalPackages:
gatsby-cli: 2.4.5

[wwrightiv]

This is the only way I can get all of my images to display

[pieh]

How does your html output looks like? Can you inspect it and check if urls used in <img> tag works? It might be either some limitation in contentful asset API or something on our side that interacts with API wrong

/cc @Khaledgarbaya

[wwrightiv]

How does your html output looks like? Can you inspect it and check if urls used in <img> tag works? It might be either some limitation in contentful asset API or something on our side that interacts with API wrong

/cc @Khaledgarbaya

@pieh here's the url in the <img> tag:

And here's the actual link from the src attribute:

//images.ctfassets.net/ld65dia7zxun/1f2NZfkx1O6OsUu6eIQ8Ko/f00dd91c96cfc9fd18a955db6655f73c/port-test-IMG_7234.jpg?w=1600&q=50

So you can visualize my issue, here is the page at 2567 pixels wide:

It looks like this is tripped at 1385 pixels - any screen above that won't display the images and anything below will. Here is the page at 1384 pixels:

[wwrightiv]

This definitely has to do with the contentful fluid query, the aspect ratio of the image and possibly the display density. I just tested passing the data to a normal <img> element and the image still doesn't appear above 1385px screen width on retina displays. The aspect ratio is 0.625. However an image with an aspect ratio of .667 displays fine on all sizes.

[wwrightiv]

I've done some more testing and now I've come to believe that the issue is a combination of high resolution, portrait images on retina screens and the contentful api. After resizing the image that wouldn't display from 4000w x 6000h to 2000w x 3000h it displayed fine. Closing as this seems like a contentful problem and not gatsby.