Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

2reactions

jimbluecommented, Oct 13, 2017

@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>

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

0reactions

HunterGraubardcommented, Apr 19, 2018

@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?