Image rendered wider than its container, overlapping into text in mobile view
Closed, ResolvedPublic
Actions

Assigned To

None

Authored By

	Derpinguin7
	Jan 23 2018, 11:10 AM

Description

I encountered a weird behaviour using Chrome 63.0.3239.73 on an ipad 4 with iOS 10.3.3, both in horizontal and vertical view.

The text flows into one image on a certain page. See screenshot.

The image should not be able to override the boundaries given by its container. What is happening here?

Since the iPad doesn't provide DevTools I can't dive into the problem myself.

Steps to reproduce:

Using an iPad with iOS 10.3.3, open Chrome 63.0.3239.73.
Go to https://en.m.wikipedia.org/wiki/Titan_(moon)
Scroll to section "Lakes"

Result:
The text next to the MagicIsland-image flows into the image. The image has no padding. See screenshot.

Related Objects

Mentioned In: T193347: Wide mapframes can create large amounts of whitespace on the mobile site
T181756: Section headings on mobile web does not adhere to {{clear}}
T191893: [Bug] Horizontal scrollbar shown when browser window is between 1000px and 1107px

Event Timeline

Derpinguin7 created this task.Jan 23 2018, 11:10 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 23 2018, 11:10 AM

Thanks for reporting this. I can reproduce this on a normal desktop computer with Firefox 57 in https://en.m.wikipedia.org/wiki/Titan_(moon)#Lakes

The image has a width of 400px. Its container says <div class="thumbinner" style="width:404px;max-width:404px"> however it's only 320px.

Aklapper renamed this task from Text flows into image in Chrome to Image rendered wider than its container, overlapping into text in mobile view.Jan 23 2018, 2:02 PM

This is a template issue and will need to be fixed on wiki! Specifically Template:multiple image needs to use the noresize class on the containe.r

yeah, the 'tablet' style of minerva tries to force everything to 320px.. Not sure if we can support this, without totally butchering things... i'll take a look. at some point.

TheDJ mentioned this in T191893: [Bug] Horizontal scrollbar shown when browser window is between 1000px and 1107px.Apr 24 2018, 12:10 PM

TheDJ mentioned this in T181756: Section headings on mobile web does not adhere to {{clear}}.

TheDJ mentioned this in T193347: Wide mapframes can create large amounts of whitespace on the mobile site.May 3 2018, 8:21 AM

I don't see that 320px max any longer now in the tablet mode Seems like it is 704px now ?

In T185562#5025465, @TheDJ wrote:

I don't see that 320px max any longer now in the tablet mode Seems like it is 704px now ?

Shall this task get closed as resolved?

No reply to my last question, hence closing.

Image rendered wider than its container, overlapping into text in mobile viewClosed, ResolvedPublicActions

Description

Related Objects

Event Timeline

Image rendered wider than its container, overlapping into text in mobile view
Closed, ResolvedPublic
Actions