Steps to replicate the issue (include links if applicable):
- Navigate to a Wikipedia article with mobile/Minerva skin and carousel enabled: https://en.wikipedia.org/wiki/Berlin?mpo=image-carousel-retest:carousel-captions-jump&useformat=mobile
- Simulate a fake banner if a real one isn't present (refer to QA instructions below)
- Observe the carousel hide button position
What happens?:
- Hide button is anchored to the div#bodyContent.content, not the carousel.
- Hide button appears transparent on hover. If you hover over the hide button, the background color appears transparent.
| no hover | hover state |
 |  |
What should have happened instead?:
- Hide button is anchored to the carousel.
- Hide button remains visible when hovered.
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
Bug found on production enwiki
QA instructions
Reproduce the bug on enwiki and then compare the current behavior to the patched behavior by injecting a fake banner.
Simulate a banner by pasting this in the browser console:
// fake banner, as a previous sibling of the carousel root
const root = document.getElementById('mmv-carousel-root');
const b = document.createElement('div');
b.id = 'fake-banner';
b.textContent = 'FAKE BANNER';
b.style.cssText = 'height:180px;line-height:180px;text-align:center;font-size:18px;' +
'background:#fbe3d6;border:2px dashed #c66';
root.parentNode.insertBefore(b, root);
Expected behavior:
| current behavior (pre-fix) | static position | button appears anchored to the banner |
| patched behavior | relative position | button anchored to the carousel |
Verify that the:
- Hide button is visible on hover
- Hide button is anchored to the carousel
- Hide button doesn't scroll away or get cut off when horizontally scrolling the carousel
