Print media query for img max-width breaks Google Maps printing in Chrome

[rdlugosz]

Somewhat related to the issue with images in IE8 (#984), after a long search I've discovered that line 260 in the H5BP print media query breaks printing of Google Maps if your browser is too wide (or, more specifically, if the map div is wider than ~800px). I've seen this on several WebKit browsers; example below tested on Chrome 46.

The map will look fine on screen, but when you hit print you'll notice that all of the tiles are missing. I've created a demonstration here . Note that the only file changed in this repo from the default H5BP install is index.html.

The simple fix is to override the style via:

@media print {
  img {
    max-width: none !important;
  }
}

... but this took me a rather long time to discover (on and off for weeks until finally digging in with process of elimination). Is there a reason why this style is being set?

It strikes me that this could be considered a Google Maps bug and not that of H5BP, but thought this would be a better place to start. After all, a stock browser does not exhibit this problem until H5BP is introduced.

[cvrebert]

X-Ref: twbs/bootstrap#1506

[rdlugosz]

Is that bug really related? This is specifically related to the print styles, not the regular img display.

[cvrebert]

Same underlying issue, which is that img { max-width: 100%; } isn't compatible with Google Maps (among other widgets, e.g. Mapbox). The only difference is that in h5bp the problematic CSS is within a print media query.

[alrra]

Is there a reason why this style is being set?

@rdlugosz It was introduced in order to prevent images from getting cut off on print.

[rdlugosz]

That's reasonable, but while it fixes a problem with images being cut off,
it creates an arguably more unexpected result with several mapping systems.

Any thoughts on how this could be adapted to solve the basic image problem
while not impacting the way the mapping frameworks work?

Or, would this be better resolved via a readme or FAQ item?

On Thursday, January 14, 2016, Cătălin Mariș notifications@github.com
wrote:

Is there a reason why this style is being set?

@rdlugosz https://github.com/rdlugosz It was introduced
b2faa1f
in order to prevent images from getting cut off on print.

—
Reply to this email directly or view it on GitHub
#1741 (comment)
.

[QWp6t]

Just read the solution in the link @cvrebert posted.

img[src^="http://maps.gstatic.com/"], /* map view */
img[src^="http://maps.googleapis.com/"] /* street view */
{
  max-width: none !important;
}

[cvrebert]

s/the solution/a mediocre solution/

[paulirish]

If it's good enough for bootstrap, then why not. :)

Open to a PR like twbs/bootstrap#19000