Как убрать артефакт за пределами тега?

Question

barbarisanet @barbarisanet

Как убрать артефакт за пределами тега?

Здравствуйте!
Делаю тут расширение для Chrome, столкнулся с проблемой. Появляется артифакт - см. по стрелочкам на скрине.
Если открыть просто как страницу - пробемы нет.
Если style="width:417px; уменьшить до width:416px; артефакт пропадает.
Если убрать параграф "critical" - артефакт пропадает. То есть как-то завязано на размеры окна.
Игрался с марджинами, педдингами, нормализацией - не помогает.
Вот верстка для воспроизведения:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1,user-scalable=0">
    <title>artefact</title>
    <link rel="stylesheet" href="https://unpkg.com/normalize.css">
  </head>
  <body>
    <div style="width:417px; background-color: white;">
      <p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
      <p>critical</p>
    </div>
  </body>
</html>

Вопрос задан 06 июл.
115 просмотров

7 комментариев

Подписаться 1 Средний 7 комментариев

alexalexes @alexalexes

В песочнице сделайте пример.
Вангую, что в normalize.css есть побочное свойство, которое дает div лишний отступ.

Написано 06 июл.
ProjectSoft @ProjectSoft

Это расширение. Поэтому зачем там normalize.css совершенно неизвестно.
Для написания стилей для своего расширения хватит нескольких строк из того же normalize.css, чем тянуть откуда-то весь файл.
Для body объявите правило overflow: hidden;. Для блока перенесите инлайновые стили в свой css файл и для него установить overflow: auto; если вдруг контента станет больше чем предполагается по умолчанию для всплывающего окна.

Написано 06 июл.
barbarisanet @barbarisanet Автор вопроса

alexalexes, это расширение Хрома, тут песочница не поможет.
На обычной странице артефакта нет, только в popup-e расширения.
И без normalize.css тоже воспроизводится.

Написано 06 июл.
Wispik @Wispik

уменьшить до width:416px; артефакт пропадает.

А что мешает просто уменьшить на 1 пиксель ширину и не париться по этому поводу?

Написано 06 июл.

barbarisanet @barbarisanet Автор вопроса

ProjectSoft, я normalize.css вставил просто, чтобы сократить пример. Так-то, естесссно, его не тащу.

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
  overflow: hidden;
}

main {
    width: 420px;
    background: silver;
    overflow: auto;
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>artefact</title>
    <link rel="stylesheet" type="text/css" href="popup1.css"/>
  </head>
  <body>
    <main>
      <p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p>
    </main>
  </body>
</html>

Написано 06 июл.

barbarisanet @barbarisanet Автор вопроса

Wispik, тут пример же просто, сделанный специально для воспроизведения бага.
А реальное окошко - оно же не такое.

Написано 06 июл.
ProjectSoft @ProjectSoft
barbarisanet,

*, *:before, *:after { box-sizing: border-box; }

По опыту я не встречал подобного при разработки расширений. Никогда не видел подобной альфы у окна.
Попробуйте протестировать на другом компьютере в таком же браузере. Версионность браузера должна быть одинаковой.
Написано 07 июл.

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 6 часов назад
- 56 просмотров
1

ответ
Linux

+2 ещё

Простой
Почему некоторые сайты не открываются в Google Chrome?
- 1 подписчик
- 19 часов назад
- 645 просмотров
3

ответа
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 20 часов назад
- 66 просмотров
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 30 просмотров
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 98 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 86 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 103 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

10000 руб./за проект

Расширение для Google Chrome

22 дек. 2024, в 20:34

3000 руб./за проект

Парсер-бот

22 дек. 2024, в 20:12

10000 руб./за проект

В песочнице сделайте пример.
Вангую, что в normalize.css есть побочное свойство, которое дает div лишний отступ.
Это расширение. Поэтому зачем там normalize.css совершенно неизвестно.
Для написания стилей для своего расширения хватит нескольких строк из того же normalize.css, чем тянуть откуда-то весь файл.
Для body объявите правило overflow: hidden;. Для блока перенесите инлайновые стили в свой css файл и для него установить overflow: auto; если вдруг контента станет больше чем предполагается по умолчанию для всплывающего окна.
alexalexes, это расширение Хрома, тут песочница не поможет.
На обычной странице артефакта нет, только в popup-e расширения.
И без normalize.css тоже воспроизводится.
уменьшить до width:416px; артефакт пропадает.

А что мешает просто уменьшить на 1 пиксель ширину и не париться по этому поводу?
ProjectSoft, я normalize.css вставил просто, чтобы сократить пример. Так-то, естесссно, его не тащу.

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } * { margin: 0; padding: 0; } body { line-height: 1.5; overflow: hidden; } main { width: 420px; background: silver; overflow: auto; }

<!DOCTYPE html> <html lang="ru"> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>artefact</title> <link rel="stylesheet" type="text/css" href="popup1.css"/> </head> <body> <main> 012345678910 </main> </body> </html>
Wispik, тут пример же просто, сделанный специально для воспроизведения бага.
А реальное окошко - оно же не такое.
barbarisanet,

*, *:before, *:after { box-sizing: border-box; }

По опыту я не встречал подобного при разработки расширений. Никогда не видел подобной альфы у окна.
Попробуйте протестировать на другом компьютере в таком же браузере. Версионность браузера должна быть одинаковой.

Как убрать артефакт за пределами тега?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт