Поле предварительного просмотра печати скрытой для печати части в новой версии Chrome

Я показал несколько скриншотов, которые показывают проблему...

Проблема:

Я пытаюсь напечатать эту страницу только с таблицей, и, как показано на изображении с открытой боковой панелью, я поместил эту боковую панель в print-hidden, и она работала до версии Google Chrome 46.0.2490.71 но после следующего обновления в @media print css margin не работает.

В настоящее время моя версия Google Chrome — 48.0.2564.23.

Страница боковой панели:

Изображение 1 с боковой панелью

Новая версия Chrome показывает поля, как показано на изображении предварительного просмотра, и эта проблема возникает только в браузере Chrome, во всех других браузерах он работает нормально.

Просмотр страницы боковой панели для печати:

Предварительный просмотр печати с боковой панелью

Без боковой панели:

Изображение второе без боковой панели

Без просмотра страницы на боковой панели:

Предварительный просмотр без боковой панели

Я не могу понять, почему новая версия хрома занимает print-hidden поля div...!!

Важно то, что это не работает в последнем обновлении Chrome, только в остальном все было в порядке.

Пожалуйста, если кто-то определил проблему печати в последнем обновлении Chrome, сообщите мне, у кого есть решение.

Вы можете спросить, есть ли у вас какие-либо вопросы, чтобы понять мою проблему.

Спасибо...

Пытался:

Я попытался указать отрицательное левое поле, но в этом случае предварительный просмотр печати во всех других браузерах не подходит.

Выпуск на GitHub:

ошибка GitHub

Проблема на форуме Google Chrome:

проблема с форумом Chrome

JsFiddle:

скрипка

В JsFiddle я использовал свойство css margin-left, но оно не работает в последней версии Chrome после 47, оно отлично работало в более старой версии до Google Chrome 46.0.2490.71, но в следующем обновлении это большая проблема, в другом браузере он работает как обычно очень плавно...


google-chrome css printing print-preview
person Sagar Naliyapara    schedule 18.12.2015    source источник
comment
Не уверен, правильно ли я вас понял. Вы имеете в виду, что на боковой панели есть класс, скрытый для печати, но он занимает место на странице? Убедитесь, что селектор класса @print print-hidden имеет свойство display:none, потому что visibility:hidden не показывает его, а занимает место, как если бы оно было отображено.   -  person miguel-svq    schedule 20.12.2015
comment
@miguel-svq, даже если я укажу margin-left:-200px; в @media print, тогда он не работает в хроме, в другом браузере этот @media print работает нормально...!!   -  person Sagar Naliyapara    schedule 20.12.2015
comment
Пожалуйста, опубликуйте готовый код или предоставьте демонстрацию.   -  person Alex    schedule 20.12.2015
comment
@SagarNaliyapara проверьте это Я проверил в Chrome v 47.0.2526.106 m, и он работает.   -  person Alex    schedule 21.12.2015
comment
@SagarNaliyapara ты решил свою проблему? как это работает, как на Q или по-другому?   -  person J.Tural    schedule 27.12.2015
comment
@J.Tural Работает до версии 47, но не в бета-версии 48 Chrome.   -  person Sagar Naliyapara    schedule 28.12.2015

Ответы (3)


arrow_upward
4
arrow_downward

сначала проверьте скрипт https://jsfiddle.net/ceh185bw/11/

Я сделал 2 вещи,

1- поставить печать внизу

2- превышение маржи для контейнера

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
    border: 3px solid;
}
#main-container {
    margin-left: 200px!important;
    border: 3px solid;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{
    display:none !important;
}
#main-container {
margin-left: 0px!important;
border:1px solid;
border: 3px solid;
}
#main-container {
    margin-left: 0px!important;
}
}
person J.Tural    schedule 23.12.2015
comment
Работает до версии 47, но не в 48 бета-версии Chrome. - person Sagar Naliyapara; 28.12.2015
comment
Я отредактировал скрипку, там отсутствовала ; бета-версия хрома, которую никто не использует ... вы не можете обновить ее автоматически .... см. Использование w3schools.com/browsers/browsers_chrome.asp 48 его бета-версии имеют проблемы, но мое решение работает ... + теперь сосредоточьтесь на 46, это наиболее часто используемый . - person J.Tural; 28.12.2015
comment
полезный ответ, но не глобальное решение - person Sagar Naliyapara; 04.01.2016
comment
это не глобально, потому что его проблема больше связана с переопределением свойств, которые он предопределил. - person J.Tural; 10.01.2016

arrow_upward
3
arrow_downward

В css есть 2 проблемы.

1) Печать носителя должна быть в конце 2) Вы по ошибке добавили запятую в коде после отображения: нет.

@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important},
#main-container {
    margin-left: 0px!important;
}
}

Правильный CSS будет:

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
}
#main-container {
    margin-left: 200px!important;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important}
#main-container {
    margin-left: 0px!important;
}
}
person Rovi    schedule 21.12.2015
comment
Работает до версии 47, но не в 48 бета-версии Chrome. - person Sagar Naliyapara; 24.12.2015

arrow_upward
0
arrow_downward

Используемая вами тема выглядит причудливо, поэтому я предполагаю, что есть переход, связанный со свертыванием и отображением боковой панели.

Если это так, то решение можно найти здесь: https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/

Вкратце: отключите все переходы в таблице стилей печати (media="print") для всех элементов, применив

* {
  -webkit-transition: none !important;
  transition: none !important;
}

...или заверните его в '@media print' в обычной таблице стилей.

В вашем стиле печати вы устанавливаете ширину боковой панели на 0 пикселей, но Chrome едва начал анимировать ширину (из-за перехода), когда он делает снимок печати, следовательно: поле, которое все еще видно!

person Daniël Teunkens    schedule 11.02.2016