Невозможно переопределить прописку в стиле печати, когда установлена длительность перехода

У меня есть своеобразная проблема, которая, по-видимому, влияет только на Chrome (протестировано в Chromium 47.0.2526.73 на Ubuntu, Chrome 48.0.2564.82 м на Windows, Firefox 43.0.4 на Ubuntu), и только в действительном print-preview (проблема не возникает при эмуляции печатных носителей в инструментах разработчика).Невозможно переопределить прописку в стиле печати, когда установлена длительность перехода

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

Теперь, можно было бы ожидать, что это будет легко исправить. Основной элемент контейнера имеет отступом слева от 230 пикселей, чтобы оставить место для боковой панели, которое должно быть равно нулю при печати. Тем не менее, я не могу получить стиль печати, который фактически устраняет это дополнение.

Я уменьшил его до минимального тестового примера, как показано на рисунке here. Я бы использовал фрагмент на месте, но это не работает так хорошо, когда вы пытаетесь распечатать-превью. Источник моего примера выглядит следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
<title>Print style problem demonstration</title> 
<style type="text/css" media="all"> 
.page-with-sidebar { 
    background: purple!important; 
    transition-duration: .3s; 
} 

@media(min-width: 1199px) { 
    .page-sidebar-expanded { 
    padding-left: 230px; 
    } 
} 
</style> 
<style type="text/css" media="print"> 
.page-with-sidebar, .page-sidebar-expanded { 
    padding-left: 0!important; 
    transition-duration: 0s!important; 
} 
</style> 
</head> 
<body> 

<p>I have no left padding.</p> 

<div class="page-sidebar-expanded page-with-sidebar"> 
    <p style="color: white;">I should have no left padding when printed</p> 
</div> 

</body> 
</html>

В этом примере я пытаюсь устранить отступы пурпурного р при печати, установив padding-left: 0!important; в стиле печати. Я выделил проблему для стиля transition-duration: .3s;, и проблема исчезнет, если она удалена. Однако установка transition-duration: 0s!important; не отменяет ее.

Я прочитал this thread, который является наиболее актуальным я мог бы найти, но решения, описанные, кажется, не работает для меня (что делает переход экрана только и добавление других transition: none линий).

Еще одно интересное наблюдение - проблема также основана на правиле @media(min-width: 1199px). Если это удалено, проблема также исчезнет.

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

Я делаю что-то неправильно или это ошибка в Chrome?

источник

2016-01-21 George Dewar

Вы пробовали с -webkit- префикс? –

Да - по крайней мере, я пробовал '-webkit-transition: none;' как это было предложено в потоке, к которому я привязан. Я не пробовал «-webkit-transition-duration-duration-duration-0s», хотя я дам это завтра. –

Интересно ... Проблема не возникает * на Chromium 45.0.2454.101 на Ubuntu 14.04 x 64 на другом ПК. –

я зарегистрировал это как потенциальную ошибку в Chromium, и это теперь было verified as such, который я думаю, ответ на этот вопрос.

Возможность воспроизведения на Windows 7, Mac OS 10.11.2 и Ubuntu 14.04 с использованием хромированной стабилизации M48 - 48.0.2564.82.

Bisect Информация:

Хорошо Сложение: 47.0.2524.0
Bad Сложение: 47.0.2526.0

В качестве обходного решения (до тех пор, пока исправление не будет выпущено), я попробую оставить накладку на месте и использовать отрицательный запас для его противодействия.

источник

2016-01-22 07:42:33

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

<style type="text/css" media="all"> 
     .page-with-sidebar { 
      background: purple!important; 
     } 

    @media(min-width: 1199px) { 
     .page-with-sidebar { 
      transition-duration: .3s; 
     } 
     .page-sidebar-expanded { 
      padding-left: 230px; 
     } 
    } 
    </style> 
    <style type="text/css" media="print"> 
     .page-with-sidebar, .page-sidebar-expanded { 
      padding-left: 0!important; 
     } 
    </style>

источник

2016-01-22 05:14:52

Спасибо Umer, это работает для меня, но это не допустимое изменение, так как маржа должна применяться для всех ширины экрана. Если я добавлю другое правило мультимедиа с max-width: 1198px и поставлю его там, проблема вернется. –

вы можете использовать, чем '@media (min-device-width: 0px) { .page-with-sidebar { duration-duration: .3s; } } 'переход применяется на всех экранах, и это может не повлиять на печать –

Спасибо Умер, к сожалению, это не решает его для меня. Вы уверены, что версия Chrome, которую вы используете, действительно страдает от проблемы? –

Невозможно переопределить прописку в стиле печати, когда установлена ​​длительность перехода

ответ

Bisect Информация:

Смежные вопросы

Невозможно переопределить прописку в стиле печати, когда установлена длительность перехода