[bug]: Image placeholder height gets overriden by tailwind preflight styles

[TMNRokas]

Describe the bug

Placeholder of Image component is supposed to have a specific height, but it gets overridden by global img rule: node_modules/tailwindcss/lib/plugins/css/preflight.css Line: 247 img, video { max-width: 100%; height: auto; }

Above rule overrides height that is supposed to be set by attribute in: node_modules/@magento/venia-ui/lib/components/Image/image.js height={talonResourceHeight}

Since HTML attribute height has lower specificity than a rule from stylesheet, it gets overridden.

To reproduce

Steps to reproduce the behavior:

1. Go to 'Venia demo page'
2. Scroll down to footer
3. Inspect logo, and particularly: <img loading="eager" title="Venia" alt="Venia" class="undefined image-placeholder_layoutOnly-1jH image-placeholder-1mM" height="18" src="img src" width="102">
4. Placeholder height is incorrect - should be 18px as per element attribute. Instead it's set to auto and gets calculated to 127.5px.

Same issue can be inspected in header logo, but it's harder to visually see, because it overflows.

Expected behavior: .image-placeholder should have height of 18px.

Screenshots

Possible solutions

Instead of adding height as HTML element attribute height={height} add it as style={{height: height + "px"}}'

Please complete the following device information:

• Device: All
• Browser: All
• Browser Version: All
• Magento Version: Any

Please let us know what packages this bug is in regards to:

• [ ] venia-concept
• [X] venia-ui
• [ ] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[m2-assistant[bot]]

Hi @TMNRokas. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information.

Add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[anthoula]

@magento export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-2706 is successfully created for this GitHub issue.

[Sahilsks]

@magento I am working on this

[glo80771]

Hi @TMNRokas, The issue is not reproducible as the logo image is taking the height as 18px only.

Please find the steps which I followed for reproducing:

1. Go to 'Venia demo page'
2. Scroll down to footer
3. Inspect logo, and particularly:
4. Placeholder height is incorrect - should be 18px as per element attribute. Instead it's set to auto and gets calculated to 127.5px.

PFA for the screenshot.

Please let me know if I am missing anything.

[glo80771]

As there is no update for more than two weeks, we are closing this ticket. Please feel free to open the issue if it still exists.