Issue metadata
Sign in to add a comment
|
CSS transitions still not ignored on @media print
Reported by
carl...@4sconsult.com,
Oct 3 2016
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36 Example URL: Steps to reproduce the problem: 1. The attached sample should be used. It contains 3 (headers,main,footer) containers, with padding-left:250px. 2. The header and footer have a transition effect and gray color background. 3. There is a @media screen to take effect at 992px width. It reduce the padding to 10px and change the background to light blue for all 3 containers. 4. Reducing the width of browser below 992px, the transition work as expected. The header and footer takes transition while the main does not. 4. Also there is a @media print that indicate to ignore any transition and reduce to 10px padding-left and background should be white. 5. Trying to print preview while the browser width is bigger of 992px, the transitions on the header and footer will not be ignored and not triggered. They will still padded at 250px and gray color background. While the main container without transition shows OK. 6. Reducing the browser width below 992px and try to print, now the correct behavior will show as the transition already has been triggered. What is the expected behavior? The 3 containers should be 10px left padded and the background color should be white at any width of the browser window. Also tested on Firefox, Edge and IE11. The sample works OK there. What went wrong? The CSS transition are not triggered and not ignored on @media print. Transitions do not make sense while @media print are in and they cannot be removed. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 53.0.2785.116 Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 23.0 r0 Tried to put the transition inside of a @media screen only to see if solve the problem, but it not. Additional this workaround has side effects as now the transition work only on the out stage. Tried also using simulation of the @media print with the DevTools and the problem persist. This is related to the same at issue 412281
,
Oct 3 2016
This sounds like the same issue mentioned in bug 641311 See my comment there: https://bugs.chromium.org/p/chromium/issues/detail?id=641311#c8 If you remove the max-width query it works as expected. Chrome seems to ignore the "only screen" query modifier and handle the transition incorrectly on print. When other media queries, such as max-width, are present this bug occurs as it seems to always include those, even when "only screen" is used.
,
Oct 4 2016
yeap, that is problem, it's the transition. That original bug report didn't give enough detail about the problem with transition and it was not directly reproducible. That was the reason that I was asked to open a new bug that describe the issue in a simple reproducible manner. The previous issue 412281 (which is already closed) state that this bug should be already solved, but it still here. Actually I should retract about using the CSS emulator, it actually works there. That still not the case for print preview. Also tried to send it to real printer. It shows exactly like the print preview.
,
Oct 4 2016
@reyad , I tried also with not @media screen simple @media all, no solution. Removing the max-width media rule is not a negotiable workaround, because those are required for responsive layouts. Anyways, as the test case shows, the main container is not affected by the bug. The difference? it does not have CSS transition. The max-width or excluding @media screen does not make any difference. The transitions are there to simulate menu drawers the same as Google Materialize does. Although this test case do not show that scenario for the sake to keep it as simple as possible.
,
Oct 4 2016
,
Oct 5 2016
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by thestig@chromium.org
, Oct 3 2016