Page MenuHomePhabricator

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

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:

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

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

IMG_0262.PNG (2×1 px, 1 MB)

Event Timeline

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
Jdlrobson added a subscriber: Jdlrobson.

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.

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

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.