Since Oct 8th Webflow UI Update — Images Insides Grid Element Ignore Column-Span Setting When Published — Loading Lowest Resolution Asset — Which Matches Min Column Width

Community resources Bugs
1

SUMMARY:

Precisely (tested via daily backups) since Oct 8th Webflow UI update, webflow publishes incorrect “sizes” attribute for images inside grid elements. Instead of utilizing user column span setting, it defaults to the # of columns based definition in VW units.

Older images published before Oct 8th are unaffected.

Issue is replicated cross browser.

STEP BY STEP DETAILS

  1. The occurrence of the “Sizes Attribute Publishing” bug coincided precisely with the “Safari Designer Unresponsive” bug outlined at Unable to select & edit elements in WebFlow - #12 by Dimony

  2. While “Safari Designer Unresponsive” issue appears isolated to Safari, “Sizes Attribute Publishing” bug is reproduced when published in either latest Opera or Chrome versions.

  3. Images published prior to Oct 8th are unaffected and receive correct sizes setting.

EX. The following image (published prior to Oct 8th) is set to span all 5 columns and receives the correct “sizes=100vw” attribute — ensuring it both spans the full width of the division and browser loads the high resolution image asset

correct-puslishing
correct-puslishing2560×948 546 KB

  1. Images published since Oct 8th (the first occurrence of the new visual loader for Designer)

%20Loading
%20Loading2154×678 23.3 KB

ignore the user column-span setting to span 1-5 columns and receive “sizes=”(max-width: 479px) 25vw, (max-width: 767px) 59vw, (max-width: 991px) 20vw, 21vw""

incorrect
incorrect2558×808 388 KB

  1. I have created a mini site test site for you to experience this issue.

It contains a copy paste of the original Grid Element where the problem was encountered, as well as 2 new ones + a few test divs to ensure that the issue was isolated to responsive image loading.

TEST LINKS:

Read-Only: https://preview.webflow.com/preview/test-for-inside-grid-bug?utm_medium=preview_link&utm_source=designer&utm_content=test-for-inside-grid-bug&preview=5919b5ed76a4fa2b483508a9d62b507e&mode=preview

Live: https://test-for-inside-grid-bug.webflow.io/

2

@cyberdave — any chance you can let me know whether this is an acknowledged issue, and if there will be a fix?

I need to launch a site, where a core design component on > 90% of the pages is a grid based hero section containing a high resolution image, that relayouts via media queries. Effectively this bug breaks the site completely and delays the launch — requiring a workaround.

if you are not going to be able or it will not be in the pipeline to fix within a week, I will need to rework it without a grid element asap

:slight_smile: no big deal if you can’t fix it (I understand there is myriad bugs with high priority that team must be working on) — just let me know so that I can access the situation and proceed (ie. trash all grid elements).

3

Assuming you guys will fix this soon.

Given issue above + the context of CSS duplicated ID’s caused via Grids Grid ID's based CSS bloat caused by GRID elements inside Symbols - #8 by Dimony (not sure if this is fixed or will be fixed) GRID does not appear to be a stable feature as a tool inside Webflow for time sensitive projects as of yet.

Not a critique of your work, love what you guys are doing overall. I’m sure this GRID will be stable soon, and I look forward to using it :).

For the time being I am going to revise the UI via flexbox.

4

Solved by deployed fix to the “Designer not Working in Safari” bug — Safari doesn't work anymore - #5 by AlexN

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.