Page MenuHomePhabricator

"overflow-x: auto" not compatible with flexed images
Closed, ResolvedPublic

Description

It looks like things aren't configured so "overflow-x: auto" takes effect in a couple cases.

This manifests in entire sections having a large right margins instead of the wide element itself being scrollable side-to-side. In other words, the entirety of the section is made side-to-side scrollable rather than just the wide element.

Examples:

Image with link overlay:
"enwiki > Counties of England"
(Tap image for animation)

eng11.mov.gif (480×540 px, 3 MB)

^ note in the animation above I tweak the "thumbimage" class to fix the issue - I'm unsure if this fix creates other side-effects though.

This appears to be the flex box rules on .content .thumb .thumbinner that @Jhernandez introduced. They are restricted up to 720px. Should probably have an overflow-auto

Event Timeline

Jdlrobson added subscribers: Jhernandez, Jdlrobson.

These are actually 2 issues.

The first issue in Counties of England appears to be the flex box rules on .content .thumb .thumbinner that @Jhernandez introduced. They are restricted up to 720px. Should probably have an overflow-auto

The second issue is because span and dd elements are inline by default and I've captured this separately in T160946

Jdlrobson renamed this task from "overflow-x: auto" not working for images with link overlays and mwe-math-elements. to "overflow-x: auto" not compatible with flexed images.Mar 20 2017, 8:13 PM

In case it comes in handy for testing, "enwiki > Kingdom_(biology)" has a too-wide image in its "The three domains of life" section which does side-to-side scrolling correctly:

(Tap image for animation)

life.mov.gif (720×416 px, 793 KB)

Jdlrobson added a subscriber: bmansurov.

@bmansurov does this seem 'triaged but future' to you?

Jdlrobson triaged this task as Medium priority.Apr 6 2017, 4:52 PM