UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Open test.html within test_files.zip
2. Generate Print Preview
3. a. At section 69(2) of the document, there is excess space above the English (right) version of the text in the Print Preview. This space is not present in the rendered HTML. This excess space is observed in many parts of the document
   b. In the Chinese (left) version of section 82, the text under section 82(4)(b)(ii) overlaps with section 83 in Print Preview. This is not observed in the rendered HTML.

What is the expected behavior?
Print preview is visually similar with the rendered HTML.

What went wrong?
1. At section 69(2) of the document, there is excess space above the English (right) version of the text in the Print Preview. This space is not present in the rendered HTML. This excess space is observed in many parts of the document

2. In the Chinese (left) version of section 82, the text under section 82(4)(b)(ii) overlaps with section 83 in Print Preview. This is not observed in the rendered HTML.
* The overlapping issue is also observed in other documents that were not included in the attached file. Overlapping issue seems to only happen on Chinese text.
* Overlapping sections differ in different Chrome versions. Overlapping issue is observed as early as version 37 of Chrome.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? N/A 

Chrome version: 50.0.2661.94  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 21.0 r0

Chinese and English texts are aligned using flex containers. The text blocks have their order CSS property set to align with their corresponding translation.
 

Deleted: test_files.zip 239 KB

test_files.zip 239 KB Download