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

Image is not visible if its parent is styled as overflow: hidden #22

Closed
kingdido999 opened this issue Jan 11, 2017 · 11 comments
Closed

Image is not visible if its parent is styled as overflow: hidden #22

kingdido999 opened this issue Jan 11, 2017 · 11 comments
Assignees
@kingdido999
Labels
bug wontfix

Comments

@kingdido999
Copy link
Owner

kingdido999 commented Jan 11, 2017 •
edited
Loading

If the parent of the image is styled as overflow: hidden, the image will not be visible. Needs to find a way to ignore overflow: hidden.
@kingdido999 kingdido999 self-assigned this Jan 11, 2017
@kingdido999 kingdido999 changed the title Add image wrapper so it always stay on top of the page when zoomed in Image is not visible if its parent is styled as overflow: hidden Jan 11, 2017
kingdido999 pushed a commit that referenced this issue Jan 12, 2017
fix overflow hidden issue #22
2a7b4cd
kingdido999 pushed a commit that referenced this issue Jan 12, 2017
refactor overflow hidden #22
aea7d28
@kingdido999 kingdido999 mentioned this issue Jan 12, 2017
Merged
kingdido999 pushed a commit that referenced this issue Jan 12, 2017
Fix image parent overflow hidden issue (#23)
bc98e48 
* fix overflow hidden issue #22

* refactor overflow hidden #22
@artaommahe
Copy link

artaommahe commented May 8, 2017 •
edited
Loading

@kingdido999 this solution does not work if overflow: hidden is required for upper scrollbar.
I have a chat with images in messages that can be zoomed on click. There is custom scrollbar (perfect-scrollbar lib) on messages list and when image zoomed by zooming everything goes wrong due to wrong image positioning inside list with overflow: visible.
Currently i ugly-hacked it via creating new img tag in body with same position/dimensions and src as clicked image and passing it to zooming.open() method, destroy it on close zooming callback.

@kingdido999 kingdido999 reopened this May 8, 2017
@kingdido999 kingdido999 mentioned this issue May 9, 2017
Closed
@kingdido999
Copy link
Owner Author

@artaommahe The latest build removes parent overflow: hidden checking and replacement all together, does it resolve your issue?

@artaommahe
Copy link

@kingdido999 it solves issue with wrong overflow on container with scrollbar but does not solve image cutting due to overflow: hidden on same container :) so i still use uglyhack with image copy with fixed position placed to body and call zoom on this copy.

@kingdido999
Copy link
Owner Author

@artaommahe yeah it does not work with overflow: hidden container for now. I removed the original fix as it's really not the right solution.

@jimblue
Copy link

jimblue commented Oct 11, 2017 •
edited
Loading

@kingdido999 I'm surprised that with overflow-x: hidden applied on the container, the zoomed image is cropped on y axis...

Do you have an idea why?

Thank you for your help! 😄

@jimblue
Copy link

jimblue commented Oct 12, 2017 •
edited
Loading

@kingdido999 a simple fix to overflow problem is to add two events to zoomin.js:

init event
destroy event

It will offer people needing overflow a way to toggle a class on the container.

What do you think?

@kingdido999
Copy link
Owner Author

@jimblue can you elaborate more? Would existing event listeners like onBeforeOpen and onClose be useful in this case?

@jimblue
Copy link

jimblue commented Oct 13, 2017 •
edited
Loading

@kingdido999 I'm not sure onBeforeOpen and onClose events are mentioned in the doc, I didn't see them.

Anyway, they could help with this problem, so here is my idea:

HTML

<html>
    <body class="overflow_x">
       // body content here
    </body>
</html>

JS

new Zooming({
   onBeforeOpen: () => {
      document.body.classList.remove('overflow_x')
    },
    onClose: () => {
      document.body.classList.add('overflow_x')
    }
})

CSS

body.overflow_x {
  overflow-x: hidden;
}

I didn't test this solution for know...

Cheers

@kingdido999 kingdido999 mentioned this issue Oct 28, 2017
Closed
@kingdido999
Copy link
Owner Author

Opened an issue to keep track of adding image wrapper #44.

@kingdido999
Copy link
Owner Author

I don't intend to find a fix at this point. I'll accept it as a known issue and mention it in the README.

@kingdido999 kingdido999 mentioned this issue Feb 21, 2018
Closed
@HunterGraubard
Copy link

@jimblue This solution looks interesting. But as you said, the documentation on the event seems lacking.

Do the events pass anything to the handler function? In my case, I have overflow: hidden on the immediate parent around the image. I have <a><img /></a>, where overflow: hidden is on the <a> tag. If the event handler has access to the img element, then I could just remove the overflow style on the parent a element. Can anyone help with this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kingdido999 kingdido999

Labels
bug wontfix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@artaommahe @kingdido999 @jimblue @HunterGraubard