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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Проблемный код:

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

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

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

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

Ответ 2

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

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

Ответ 3

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

В зависимости от ваших потребностей моя проблема и решение, которые я нашел для себя, могут удовлетворить ваши потребности. Я обнаружил, что моя проблема была очень похожа, без полосы прокрутки, когда 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; }
}

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

Ответ 4

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

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

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

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

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

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

Удачи!

Ответ 5

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

Чтобы противодействовать этому, вы можете попытаться бороться с каждым возможным пользовательским вводом (прокрутка сенсорной панели, клавиши со стрелками, выделение и перетаскивание) с помощью 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 и нет полос прокрутки.

Ответ 6

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

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

body{
  overflow-x: hidden;
}

Ответ 7

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