developit/simple-element-resize-detector

Resize events only work if iframe in viewport

Open

#10 opened on Dec 9, 2017

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (4 forks)github user discovery
bughelp wanted

Repository metrics

Stars
 (189 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

The solution of top:-100%; and margin:1px 0 0; does not keep the iframe positioned in a viewable area at all times. If the target element is nested in an element with overflow: hidden and the target element has a negative top margin or a negative absolute positioned top the resize events stop working.

top: 0; z-index: -1 seems to fix the issue but I'm not sure what all the consequences are.

Contributor guide

Research direction
Reproduce the issue with an iframe inside an overflow:hidden parent. Test the suggested fix (top:0;z index: 1) and verify no side effects. Also test edge cases with negative margins and absolute positioning.
Tech stack
javascript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSS positioningJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70