arrow-down arrow at-sign bug check checkbox-checked checkbox-unchecked svg-checkmark chevron-right chevrons-right circle-down circle-left circle-right circle-up cloud2 svg-cross2 download download external-link filter github hash home leaf leaf left link-2 log-in log-out mail menu message-square minus plus radio-checked radio-checked2 radio-unchecked search settings spinner8 target twitter up upload-2 user users warning x zap
  • Home
  • Report a bug
  • Contribute
  • All issues
  • Login

URL: https://edition.cnn.com/videos/sports/2019/01/07/exp-roger-federer-interview-australian-open-peter-carter-spt-intl.cnn

Browser / Version: Firefox Nightly 66.0a1 (2019-01-29)
Operating System: Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: “Browse” menu is not fully scrollable
Steps to Reproduce:
1. Navigate to https://edition.cnn.com/videos/sports/2019/01/07/exp-roger-federer-interview-australian-open-peter-carter-spt-intl.cnn
2. Tap the “Browse” button (top right side).
3. Scroll down the menu and observe behavior.

Expected Behavior:
Menu is fully scrollable and social media icons are not truncated.

Actual Behavior:
Menu is not fully scrollable and social media icons ar displayed truncated.

Note
1. Not reproducible on Chrome 72.0.3626.76.
2. Screenshot attached.
Affected area:

<div id="nav-expanded" class="nav-flyout" style="height: 479px;">
	<div class="js-edition-picker edition-picker">
		<div class="edition-picker__current-edition">International  Edition
			<span class="nav-section__expand-icon">+</span>
		</div>
<!--cut out-->
        <div class="nav-flyout-footer__social">
			<a href="https://www.facebook.com/cnninternational" target="_blank" class="nav-flyout-footer__social-link nav-flyout-footer__social-link--facebook" data-social-media-name="facebook">
				<span class="nav-flyout-footer__social-icon-label">Facebook</span>
			</a>
			<a href="https://twitter.com/cnni" target="_blank" class="nav-flyout-footer__social-link nav-flyout-footer__social-link--twitter" data-social-media-name="twitter">
				<span class="nav-flyout-footer__social-icon-label">Twitter</span>
		    </a>
			<a href="https://instagram.com/cnn" target="_blank" class="nav-flyout-footer__social-link nav-flyout-footer__social-link--instagram" data-social-media-name="instagram">
				<span class="nav-flyout-footer__social-icon-label">Instagram</span>
			</a>
		</div>
    </div>
</div>

Watchers:
@softvision-oana-arbuzov
@softvision-sergiulogigan
@cipriansv

sv;
Screenshot Description

Browser Configuration
  • None

From webcompat.com with ❤️

Please login to edit issues.

View issue on Github

Shortcut: Press l on your keyboard to open the label editor. Shortcut: Press g on your keyboard to be taken to the GitHub view of this page.
🔒 Closed: Works For Me
#25092

edition.cnn.com - “Browse” menu is not fully scrollable

Opened: 2019-01-30
Reporter: softvision-oana-arbuzov
Comments: 6
  • Home
  • List of issues
  • About
  • Contribute
  • Contact
  • Privacy Policy
  • Terms of Service
  • Code of Conduct