Firefox & CSS3: использование переполнения: скрытый и box-shadow - PullRequest
Новая
       45

Firefox & CSS3: использование переполнения: скрытый и box-shadow

13 голосов
/ 26 февраля 2010

Я не уверен, относится ли эта ошибка только к Firefox или также к браузерам на основе WebKit, но это действительно очень раздражает.

У меня есть шаблон / фреймворк для моего интерфейса CMS, использующий box-shadow для нескольких элементов шириной 100%. Так как это вызывает тень на правой стороне элемента, появляется полоса прокрутки. Чтобы скрыть уродливую полосу прокрутки, я установил «overflow: hidden» в элементе body и в элементе оболочки.

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

Кто-нибудь знает решение проблемы? или это просто пример противоречивой реализации css3 box-shadow?

Ответы [ 7 ]

13 голосов
/ 11 августа 2010

У меня только что была эта проблема с дизайном, над которым я работал. По сути, Firefox создает прокручиваемую область для любой тени, которая выходит за правый край страницы. По любой причине Firefox не создает прокручиваемую область, если тень распространяется влево. Поэтому мое простое решение - полностью переместить тень влево.

Код проблемы: 

-moz-box-shadow: 5px 5px 5px #000;

Простое решение: 

-moz-box-shadow: -5px 5px 5px #000;

Я попытался установить смещение по x на 0px, но, поскольку размытие равно 5, все еще имелась прокручиваемая область шириной около 2-3px.

7 голосов
/ 15 июня 2010

Поскольку я имею дело с одной и той же раздражающей проблемой, я перейду сюда и скажу, что это определенно дерьмовая функция (если она действительно упоминается как функция).Иметь тень от рамки для полосы прокрутки бесполезно, хотя я был бы рад съесть мои слова, если бы кто-то мог дать мне действительно вескую причину, по которой это должно быть так.

Я думаю, что ответ здесь - это просто сделать страницу немного другой и позволить пользователям Firefox упустить тень от рамки.Легко, если вы просто не объявите -moz-box-shadow.

2 голосов
/ 16 февраля 2012

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

В зависимости от ваших потребностей, моя проблема и решение, которое я нашел для себя, могут удовлетворить ваши потребности. Я обнаружил, что моя проблема была довольно схожей: полоса прокрутки отсутствовала, когда body { overflow: hidden; }, поскольку, как мне кажется, причина в том, что размеры элементов HTML и body на самом деле определяются размером видимой области окна браузера.

решение: если вы только выдаете вопрос о переполнении по оси x, вы можете выполнить body{ overflow-x: hidden; }, а затем с помощью javascript или медиазапросов вы можете легко изменить свойства, примененные к элементу body, и вернуть его обратно на любое другое значение. .

пример: 

body { overflow-x: hidden; }

@media screen and (min-width: 1200px) {
    body { overflow-x: visible; }
}

надеюсь, это поможет.

1 голос
/ 26 февраля 2010

Во-первых, будьте осторожны, указывая на чужую вещь как на причину своих проблем. Подумайте сами, что более вероятно, что проблема заключается в куске кода, который ежедневно используют 200 000 пользователей и 20 000 разработчиков, или в том, что он используется вами в течение 4 часов.

Тем не менее, ваш следующий шаг должен состоять в том, чтобы свести это к простой тестовой странице, которая содержит достаточно HTML, чтобы продемонстрировать поведение. В вашем случае это была бы страница вроде этой: 

<html>
  <body style="overflow:hidden;">
    <div style="box-shadow:whatever;">
      This should cause scrollbars to show
    </div>
  </body>
</html>

Произойдет одно из двух:

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

Или проблема все еще будет существовать, и в этом случае вы можете сообщить нам здесь. Затем вы также сможете подать отчет об ошибке с людьми из Mozilla.

Удачи!

0 голосов
/ 09 февраля 2011

Вы можете использовать радиус разброса (4-я длина), чтобы сделать размер тени меньше размера элемента, а затем большое смещение по y, чтобы оно показывалось под элементом. Что-то вроде box-shadow: 0 10px 10px -5px black; (конечно, я не знаю, какие значения вам нужны, поскольку вы не предоставили скрипку, вам нужно поиграться с ними в инструментах разработки) Имейте в виду, что радиус распространения заставляет тень расширяться / сжиматься со всех сторон. Так, например, радиус распространения -1px фактически сделает тень на 2px уже.

0 голосов
/ 04 февраля 2011

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

Мне удалось исправить это в Firefox 3.6 (это все, что я тестировал) и протестировать его кросс-браузерно для Google Chrome 8.0.552.327 и IE 8 со следующим правилом CSS для моего элемента body: 

body{
  overflow-x: hidden;
}
0 голосов
/ 28 февраля 2010

Хотя это может расстраивать, но это не ошибка, это действительно особенность. Если имеется полоса прокрутки / прокручиваемая область, и эта область активирована, а стрелка или другое устройство ввода запускает, область будет прокручиваться.

Чтобы противодействовать этому, вы можете попытаться бороться с каждым возможным пользовательским вводом (прокрутка сенсорной панели, клавиши со стрелками, выделение и перетаскивание) с помощью JavaScript, но лучший ответ для вас - переосмыслить, как вы используете CSS здесь. Попробуйте использовать width:auto вместо width:100%, например.

Для демонстрации (обновление):

CSS: 

#parent { width:50px; height:20px;overflow:hidden; }
#overflow { width:50px;height:50px;overflow:auto; }

HTML: 

<div id="parent">
    <div id="overflow">blahaahhahahahahahahahahahahaaaaaaaaaaahahahahahaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhahhaahahaha</div>
</div>

Поднимите высоту на #parent до 50 пикселей, и вы увидите, что полоса прокрутки по-прежнему - так что она просто скрыта; содержание не скрыто безвозвратно. Установите overflow:hidden на #overflow, без полос прокрутки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...