1627508 - Print on mac does not print all pages

Status: RESOLVED DUPLICATE of bug 534182

(Core :: Printing: Output, defect)

Description

[Scouser]

Attachment: Firefox - Lemon and almond cake recipe - BBC Food.pdf

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:74.0) Gecko/20100101 Firefox/74.0

Steps to reproduce:

go to this URL https://www.bbc.co.uk/food/recipes/lemon_drizzle_cake_66665

Actual results:

I am using Macbook 10.14.6 Mojave.
Clicked on "Print recipe" on this page.
In the print windo I click "Save as PDF"
Only first page is processed and shown in the PDF.
This happens for all recipes on this site.
Tried on Chrome and Safari and it works fine.

Expected results:

I expect to see 2 pages of information printed.

Comment 1

[Scouser]

Attachment: Chrome - Lemon and almond cake recipe - BBC Food.pdf

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[Sean Voisen (:svoisen)]

Duplicate of bug 939897. The main containing element on the recipe page is a flex container.

Work is underway to fix this and we hope to have it resolved soon.

Comment 4

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Lemon and almond cake recipe - BBC Food.html

Attached a saved webpage in case it goes away.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Reduced test case for www.bbc.co.uk.html

Comment 6

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Note: The test case needs be downloaded and open locally.

I notice there's a tall inline-block three levels above the title "Lemon and almond cake". By changing its style from display:inline-block to display:block, I can print the page without any issue. So this is bug 534182.

<div class="gel-layout"> <-- Flex container on the screen, but block container in printing 
  <div class="recipe-main-info gel-layout__item gel-1/1 gel-2/3@l"> <-- This is the tall inline-block (will be blockified on the screen)
    <div class="gel-layout"> <-- Flex container on the screen, but block container in printing 
      <div class="gel-layout__item gel-1/1 gel-2/3@m gel-3/4@l recipe-title--small-spacing">
        <h1 class="gel-trafalgar content-title__text">Lemon and almond cake</h1>

Comment 7

[Emilio Cobos Álvarez (:emilio)]

How? Flex items are blockified, so there can't be an inline-block which is a flex item. Or am I missing something?

In fact, the computed value of display on that element is block.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

This seems more like a multi-column flex container.

Comment 9

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #7)

How? Flex items are blockified, so there can't be an inline-block which is a flex item. Or am I missing something?
In fact, the computed value of display on that element is block.

You are right about this. The flex items are blockified.

By looking a bit closer, what I did in comment 6 was changing the rule display: inline-block to display: block for class=gel-layout__item. The page has a bunch of print rules. It actually changes the class=gel-layout to display: block in printing. (I notice this in devtools' Style Editor.)

@media print {
 #main-content,
 #orb-modules,
 .gel-layout {
  display:block
 }

So those class=gel-layout <div>s are flex containers on the screen, but become block frame in printing. (If they were flex containers, we could have print them successfully after bug 1622935 ...)

Emilio, should we still dup this over bug 534182? (I'll modify my comment 6 to avoid misleading.)

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Ah! So they're modified in a way that they become inline-blocks only during print, because they switch them to display: block... That kinda sucks :(

Yes, then this is still a dupe of that bug. Pretty unfortunate :/