Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image Block: when using a small image enlarged pixelated version is flashed on page load/refresh #3651

Closed
vladanost opened this issue Nov 24, 2017 · 9 comments

Comments

Projects
None yet
5 participants
@vladanost
Copy link
Contributor

commented Nov 24, 2017

Issue Overview

Gutenberg 1.7.0

When loading a page that has a small image in it, for a moment an enlarged (pixelated) version is shown.
Than it goes back to original size.

Steps to Reproduce (for bugs)

  1. Create new post
  2. Insert image block and add a small image (around 100x100, smaller the better)
  3. Save post
  4. Refresh

Expected Behavior

Image should not jump in size

Current Behavior

Enlarged image version is shown for a moment

Possible Solution

Seems that image is trying to fill the width of the editor until inline styles are loaded and then it goes back to normal.
.wp-block-image img has width set to 100%. Maybe that should be max-width instead.

@danielbachhuber

This comment has been minimized.

Copy link
Member

commented Jan 19, 2018

Thanks for the report @vladanost. I'm able to reproduce this issue in Gutenberg 2.0.0:

zoomflash

@danielbachhuber

This comment has been minimized.

Copy link
Member

commented Jan 19, 2018

My hunch for this issue is that we should emulate classic editor behavior, however is the best way to do that.

@karmatosed karmatosed added this to the Merge Proposal milestone Jan 25, 2018

@karmatosed

This comment has been minimized.

Copy link
Member

commented Mar 7, 2018

I am trying hard to recreate this and not able to in 2.3. Is this still an issue and if so is it to do with image file size?

@karmatosed karmatosed removed this from the Merge Proposal milestone Mar 7, 2018

@danielbachhuber

This comment has been minimized.

Copy link
Member

commented Mar 8, 2018

I am trying hard to recreate this and not able to in 2.3.

Can you share the steps you've followed to reproduce? Or a GIF of your reproduction process?

@karmatosed

This comment has been minimized.

Copy link
Member

commented Apr 3, 2018

I followed the steps above, which is why I am wondering if this exists still.

@danielbachhuber

This comment has been minimized.

Copy link
Member

commented Apr 3, 2018

I can still reproduce the issue in Safari 11.0.3 against master. The issue doesn't seem to be as apparent in Firefox Quantum, although there's a ton of flickering happening during the upload process.

I was unable to produce a clearer screencast than the one I originally produced.

It appears the problem is that drag-n-drop target becomes unbounded for a split second. Any pointers to where that might be in the codebase?

@danielbachhuber

This comment has been minimized.

Copy link
Member

commented Apr 12, 2018

I noticed the same effect happens on initial page load too (when there's a small image already within the post body).

@danielbachhuber danielbachhuber added this to the WordPress 5.0 milestone May 22, 2018

@antpb

This comment has been minimized.

Copy link
Contributor

commented Oct 4, 2018

I'm not seeing this on my end @danielbachhuber . Maybe my reproduction steps are wrong?

Here's a gif:

flicker image

@danielbachhuber

This comment has been minimized.

Copy link
Member

commented Oct 4, 2018

This is a pretty old issue. I'm not sure whether it still reproduces. We can close for now and come back to it in the future if it comes up again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.