[go: up one dir, main page]
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.

Sign up for GitHub

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

Jump to bottom

Display bug whith css columns in Chrome #42

Closed
arnaudjuracek opened this issue Sep 13, 2017 · 10 comments
Closed

Display bug whith css columns in Chrome #42

arnaudjuracek opened this issue Sep 13, 2017 · 10 comments
Labels
bug

Comments

@arnaudjuracek
Copy link

When the image is inside a CSS column layout, the zoomed image stay in the column layout, and the bottom wrap on the next col when the zoomed image is grabbed (which is both weird and awesome).

  • OS: OSX
  • Browser and version: Chrome 60

The grid

.grid {
  column-count: 2;
  column-gap: 1rem;

  figure {
    display: inline-block;
    margin: 0 0 0 0;
    width: 100%;
  }
}

image

The bug

last image on the left col

image

last image on the right col

image
@arnaudjuracek
Copy link
Author

image
The image wrapped in two cols ( ͡° ͜ʖ ͡°)

@kingdido999
Copy link
Owner

Hey @arnaudjuracek, thanks for the report! I will take a look this weekend.

@kingdido999
Copy link
Owner

@arnaudjuracek Would you mind creating a simple demo (on jsfiddle, codepen or anything like that) to reproduce this bug? You can add zooming as an external resource.

@arnaudjuracek
Copy link
Author

Here you go : codepen.io/PJProM

@NewJenk
Copy link
NewJenk commented Oct 27, 2017

Hi @kingdido999,

Have you had a chance to take a look at this issue?

Thanks

@kingdido999
Copy link
Owner

@NewJenk @arnaudjuracek I haven't done too much investigation, but looks like this issue happens on chrome only.

@kingdido999 kingdido999 changed the title Display bug whith css columns Display bug whith css columns in Chrome Oct 28, 2017
@kingdido999
Copy link
Owner
kingdido999 commented Oct 28, 2017 •
edited
Loading

I don't really have a clue why it's happening in Chrome. I guess making an image wrapper with absolute position could fix this issue and other issues as well like #22 #34. But it would require quite some time for me to do the rewrite #44.

@ghost
Copy link
ghost commented Nov 29, 2017 •
edited by ghost
Loading

Hi,
I've the same problem in Chrome and I fix this with:

img {
  transform: translateZ(0);
}

I hope help :)

@arnaudjuracek
Copy link
Author

So you creating a new stacking context. Nice !
Thx, will try 👍

kingdido999 pushed a commit that referenced this issue Jan 7, 2018
Fix CSS grid display issue in Chrome #42
9b84ad9
@kingdido999
Copy link
Owner
kingdido999 commented Jan 7, 2018 •
edited
Loading

Fixed in the latest version 1.2.7 thanks to @andreaballerino's suggestion. Here's the demo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@arnaudjuracek @kingdido999 @NewJenk