Firefox и CSS3: использование переполнения: скрытый и теневой полем
Я не уверен, относится ли эта ошибка к Firefox только или также к основанным на WebKit браузерам, но это действительно, действительно раздражающее.
У меня есть шаблон/платформа для моего интерфейса CMS, с помощью тени поля на нескольких элементах с шириной 100%. Так как это вызывает тень на правой стороне элемента, полоса прокрутки появляется. Для сокрытия ужасной полосы прокрутки я установил "переполнение: скрытый" на элементе тела и на отделении обертки.
Это вызывает некоторое странное поведение. Хотя нет никаких полос прокрутки, страница все еще прокручивает направо, когда я прокручиваю использование моей сенсорной панели (горизонтальная прокрутка). Я попробовал адскую партию и погуглил мою задницу прочь, но я, может казаться, не нахожу решение для этого..
Кто-либо знает решатель задач? или это - просто пример конфликтующей реализации css3 тени поля?
4 ответа
Во-первых, будьте осторожны, указывая на чужую вещь как на причину ваших проблем. Подумайте сами, что более вероятно: проблема в части кода, которую ежедневно используют 200 тыс. пользователей и 20 тыс. разработчиков, или в том, что она в той вещи, которую используете вы, уже 4 часа.
Учитывая это, вашим следующим шагом должно быть сведение всего этого к простой тестовой странице, содержащей достаточно HTML для демонстрации поведения. В вашем случае это будет такая страница:
<html>
<body style="overflow:hidden;">
<div style="box-shadow:whatever;">
This should cause scrollbars to show
</div>
</body>
</html>
Произойдет одно из двух:
Либо проблема не проявится, и в этом случае вы сможете медленно добавлять другие вещи на вашей реальной странице, пока не выясните, что на самом деле вызывало проблему.
Либо проблема все еще будет существовать, и в этом случае вы сможете сообщить нам об этом здесь. Вы также сможете подать отчет об ошибке сотрудникам Mozilla.
Удачи!
Хотя это может быть неприятно слышать, это не ошибка, а действительно особенность. Если есть полоса прокрутки/прокручиваемая область, и эта область активирована, а стрелка или другое устройство ввода работает, область будет прокручиваться.
Чтобы противостоять этому, вы можете попытаться бороться с каждым возможным пользовательским вводом (прокрутка тачпада, стрелки, выделение и перетаскивание) с помощью 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 до 50px, и вы все еще видите полосу прокрутки - значит, она просто прикрыта; содержимое не скрыто безвозвратно. Установите overflow:hidden на #overflow, и полосы прокрутки нет.
Поскольку я имею дело с той же досадной проблемой, я пойду и скажу, что это определенно дерьмовая функция (если действительно ее следует называть функцией ). Иметь тень окна, вызывающую полосу прокрутки, бесполезно, хотя я был бы счастлив съесть свои слова, если бы кто-нибудь мог дать мне действительно вескую причину, по которой это должно быть так.
Я думаю, что ответ здесь - просто отрисовка страницы немного по-другому и позволяющая пользователям firefox пропустить тень окна. Достаточно просто, если вы просто не объявляете -moz-box-shadow .
У меня только что возникла эта проблема с дизайном, над которым я работал. По сути, Firefox создает прокручиваемую область для любой тени, которая выходит за правый край страницы. По какой-то причине Firefox не создает прокручиваемую область, если тень простирается влево. Поэтому мое простое решение - переместить тень полностью влево.
Проблемный код:
-moz-box-shadow: 5px 5px 5px #000;
Простое решение:
-moz-box-shadow: -5px 5px 5px #000;
Я попробовал установить x-offset на 0px, но так как размытие равно 5, все равно оставалась прокручиваемая область шириной около 2-3px.