META: Я задал этот вопрос на Webmasters Stack Exchange , но они загрузили его и сказали, чтобы я спросил здесь. По-видимому, веб-мастера хотят говорить только о SEO.
Исходное сообщение:
У меня ОЧЕНЬ странная проблема с Chrome на Mac.
У меня есть эта страница: https://heartoflongislandna.org/cleantime/
Это простое приложение JS, которое берет дату, вычисляет разницу во времени, а затем отображает кучу врезанных прозрачных изображений PNG, на которых отображаются отмеченные теги. Они перекрывают друг друга в двух макетах:
Вертикальный, где один кладется поверх другого в вертикальной «цепочке», и
Горизонтально, где они расположены рядом, но накладываются друг на друга, как разложенная колода карт.
Что происходит, так это то, что макеты хорошо отображаются (и печатаются) в Safari и FF, но в Chrome печать закручивается вверх. Изображение на экране в порядке, и если смотреть на него с панелью устройства, настроенной на печать, то это тоже хорошо.
Существует также небольшое изображение PNG, которое добавляется к некоторым изображениям, чтобы закрыть кольцо сверху. Это добавляется как верхнее, центральное фоновое изображение.
Вертикальное расположение немного лучше, чем горизонтальное, поскольку прозрачность фона соблюдается, но фоновое изображение теряется (метка сверху).
Горизонтальное расположение - беспорядок. Фоновое изображение не отображается, а прозрачность фона не учитывается.
Я добавлю, что проверка этого с панелью просмотра устройства Chrome, установленной на «Печать», не показывает проблемы. Это выглядит здорово. Предварительный просмотр печати показывает проблему, и открытие изображения в Preview также показывает проблему, которая есть в рендере.
* ОБНОВЛЕНИЕ 2: Это теперь доступно как скрипка, здесь: http://jsbin.com/kakirinife/edit?html,output
(Скрипка) HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Issue Demo</title>
<style type="text/css">
/** This is the container for the keytag display. */
.NACC-Keytags {
margin-top: 122px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: transparent;
}
/** This allows us to compensate for the automatic offset of the tags. */
.NACC-Keytag-Tabular {
margin-top: 82px;
padding-right: 50px;
text-align:left;
}
/** This describes a keytag image layout. */
.NACC-Keytag {
width: 100px;
max-width:100px;
overflow: visible;
margin-top:-122px;
display: block;
margin-left: auto;
margin-right:auto;
background-color: transparent;
}
/** If we are displaying a closed ring, then we add an image to the background. */
.NACC-Keytag.NACC-Keytag-Ringtop {
background-image: url('https://i.stack.imgur.com/QcEYN.png');
background-position: center top;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: local;
}
/** We display inline-block, so we get a flow that will wrap. */
.NACC-Keytag-Tabular .NACC-Keytag {
display: inline-block;
margin-top:-82px;
margin-right:-50px;
}
</style>
</head>
<body>
<div class="NACC-Results">
<div class="NACC-Keytags NACC-Keytag-Tabular">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag NACC-Keytag-Ringtop" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
<div class="NACC-Results">
<div class="NACC-Keytags">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
</body>
</html>
</body>
Изображения:
ОБНОВЛЕНИЕ: Я определил, что это, скорее всего, ошибка Chrome, и сообщил об этом, но я все еще ищу исправление CSS, которое можно применить. Chrome - это популярный браузер.
Я добавлю изображения, которые показывают, что происходит.
Во-первых, это вертикальный формат на экране:
Далее, вот горизонтальное изображение на экране:
Теперь вот они оба как напечатано:
