Running into an ugly issue with server-side rendered HTML and CSS: we have a hero <img> that’s being resized across breakpoints and its styles are provided inline instead of in the rendered CSS. On desktop (mobile-first project), this causes a flash of unstyled content while the deferred Plasmic JavaScript bundle is loading. See the attached desktop screenshots for the layout and rendered HTML/styles throughout script execution.
All other Plasmic styles are applied with classes and don’t cause any similar issues. Is there a reason Plasmic’s <img> wrapper is receiving breakpoint-specific inline styles via JavaScript and can those be moved into the rendered CSS as well?
Images are labeled if you download or expand them
@yang @tiago @chungwu
This is happening on our live site right now… You can see it here: https://www.sipsby.com/
Thanks, we’re taking a look.
@chungwu were you able to take a look?
We’re still working on it. The culprit as you noted is that the size is currently specified by Javascript which is why it doesn’t get resized till after hydration. That Javascript is running as out image optimization framework figuring out the right srcset to use and reserving vertical space properly to avoid content shift. We’re looking into whether we can do the same just relying on the css styles.
@chungwu thank you. This thing is important for us to get right
Please try publishing a new version of the project
Hello @chungwu, I was getting ready to publish but noticed we started seeing an error about having an outdated version of some plasmic dependencies. Is it safe to publish without first upgrading? If our apphost for studio is hosted in our staging environment instead of production, will updating it only there cause any issues (ie is published code tied to specific versions of the plasmic dependencies), or can we safely update them at separate times?
Yes, this is fine! But you should eventually update the dependencies 
@chungwu we have published a new version, but doesn’t look like anything changed, is there anything else we need to do? (ex can still see flickering on https://www.sipsby.com/ initially until the javascript is loaded)
to confirm - what framework are you using, and are you using loader or codegen?
@chungwu looks like I didn’t give it enough time, i started refreshing again and set throttling to slow 3g, and no longer see it flicker (so it probably hadn’t completely synced on our end when i first tried)! Thank you for all your help!
