Overflow-y не работает в сафари внутри модального
Хорошо, вот html:
В принципе, я динамически добавляю строки в таблицу, и я хотел бы, чтобы контейнер прокручивал переполнение. Сначала я попытался сделать очевидное:
и это прекрасно работает везде, кроме Safari на мобильных устройствах ios.
С тех пор я потратил часы, пытаясь использовать каждую комбинацию стилей, о которых я могу думать и читать, но я не могу получить стандартную прокрутку переполнения. Самое близкое, что я получил, — это показать полосу прокрутки (хотя это не было прокруткой).
Вся помощь приветствуется. Мне трудно поверить, что невозможно прокрутить содержимое div в модальном режиме в Safari.
Изменить: по-прежнему в этой проблеме. Мне нужно решить эту проблему.
ОТВЕТЫ
Ответ 1
Я решил это, переключившись на мультиселекцию (и скрывая прокручиваемый div) на мобильных устройствах (так что никакого реального решения). Спасибо всем за помощь.
Изменить: Я, наконец, понял это. В основном, что случилось, так это то, что после того, как я переключился на использование мультиселектора, он тоже странно работал на устройствах IOS при использовании Safari.
В ходе дальнейшего изучения мой коллега заметил dojo события касания как для прокручиваемого div, так и для мультиселекта (используемый мной шаблон использует dojo). Я начал искать в источнике шаблона, чтобы выяснить, почему эти события были привязаны ко всем этим элементам, и я заметил модуль dojo, называемый «dojo/touch». После удаления этого модуля из проекта элементы работают нормально в Safari.
Отказ в том, что «dojo/touch» и IOS Safari полностью несовместимы.
Ответ 2
Попробуйте применить эту встроенную строку или через JQuery Script
или через JQuery Script
Ответ 3
У меня нет продукта IOS, чтобы проверить это, но похоже, что overflow: auto является известной ошибкой Safari.
Ответ 4
Ответ 5
Вы можете установить overflow-y:hidden; после автоматического переполнения, а на сафари по крайней мере это правило будет применено. Ссылка
Ответ 6
Код для использования двух вложенных div для отображения только вертикальной полосы прокрутки.
Ответ 7
вы можете попробовать это, он отлично работает для меня
Ответ 8
Проверьте свою версию браузера Safari. И выполните следующие критерии:
- Доступно в Safari 3.0 и более поздних версиях.
- Доступно в iOS 1.0 и более поздних версиях.
если вы против условий, то получите следующие меры:
Причина: настройка переполнения не очищает поплавок элемента
ИЛИ
Установите положение элемента относительно уровня корня/тела следующим образом:
Примечание: применить только один из них.
Спасибо и приветствуем
Ответ 9
Если ни одно из решений не работает, вы можете попробовать flex: 1 1; Это кросс-браузерная поддержка.
Источник
CSS и iOS Safari
Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!
Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.
Свойства
1. -webkit-overflow-scrolling: touch
Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.
2. -webkit-text-size-adjust: none
Отключает масштабирование текста в горизонтальной ориентации.
3. -webkit-tap-highlight-color: #ccc
Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.
Пример такого выделения:
4. -webkit-appearance: none
Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.
Применяется не только в верстке для Safari.
Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой тач. Таким образом, на тач-устройствах можно отключить лишние анимации, ненужные данным типам устройств.
Можно использовать не только в верстке для Safari.
Фиксы
1. background-attachment: fixed
Проблема: background-attachment: fixed не работает в iOS Safari.
Решение: Фиксировать не фон, а блок или псевдоэлемент.
2. Нежелательный скролл модального окна
Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.
Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.
3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.
Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.
Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js
К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.
4. Блок с position: fixed при скролле
Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.
Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:
Решение: Нужно сделать следующий «трюк», используя transform.
Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.
Выводы
А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!
Спасибо за внимание!
Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.
Источник
overflow: auto not working in Safari OSX
I have an off-canvas navigation (using Zurb Foundation) and I have the overflow set to auto so the user can scroll if the menu is long.
It is currently working on the following browsers:
- Chrome
- Firefox
- Internet Explorer
- Android Chrome
- Safari iOS
but not on Safari for OS X:
It treats the menu like overflow is hidden and does not scroll.
Here is the HTML menu:
And here is the sass:
7 Answers 7
overflow: auto; and overflow: scroll; seem to work different on iOS and OS X. Try to use overflow: scroll; plus -webkit-overflow-scrolling: touch; on iOS and OS X.
Maybe these resources will assist you:
I found this question from a Google search when trying to fix the same type of issue in my own project, but the solutions here have not solved the scroll bar disappearing, but the solution in this site solved it for me.
So adapting it to the div you want to show the scroll bar with auto behavior:
In my case it worked when I set a display (used inline-block but others worked as well) property to the element’s children.
The issue is IOS specific we can target safari ios and add css attribute such as overflow: scroll; to fix the issue.
this issue didn’t solve when I added :
To solve it Safari , and to add scrolling in div:
1- make sure to add: overflow-y: scroll; and not overflow-y: auto; because it seems it differs in Safari .
2- Then if you are specifying height for that div , don’t add overflow properties inside that div , make another nested div, add overflow prosperity for the nested div , as :
Источник
overflow-y not working in safari inside a modal
Ok here is the html:
Basically, I am dynamically adding rows to the table and I would like the container to scroll the overflow. First I tried the obvious:
and that works fine everywhere except for Safari on iOS mobile devices.
Since then I have spent hours trying every combination of styles I can think of and read about but I cannot get standard overflow scrolling. The closest I got was getting the scrollbar to show (it wasn’t actually scrolling though).
All help is appreciated. It is hard for me to believe that it is not possible to scroll the contents of a div in a modal in Safari.
10 Answers 10
Try applying this inline , or through a Jquery Script
or through a Jquery Script
I don’t have any IOS product to verify this, but it seems like overflow: auto is a known Safari bug.
You can try this. It’s working fine with Safari.
If none of the solutions work you could try flex: 1 1; This has cross-browser support.
You can set overflow-y:hidden; after overflow auto, and on safari at least that rule will be applied. Ref.
Code for using two nested divs to show vertical scroll bar only.
you can try this, it work fine for me
Check Your Version of Safari Browser. And match with criteria given below :
- Available in Safari 3.0 and later.
- Available in iOS 1.0 and later.
if you’re against the conditions then get upto following measures:
Reason: Setting overflow doesn’t clear the float at the element
OR
Set Position of element relative at root/body level like this :
Note: Apply only one of them.
For future readers, overflow does not work on safari with display: flex You must use display: block
I resolved this by switching to a multiselect (and hiding the scrollable div) on mobile devices (so no real solution). Thanks for all the help everyone.
Edit: I have finally figured this out. Basically what happened was that after I switched to using a multiselect, it too was acting weirdly in IOS devices when using Safari.
In examining further a colleague of mine noticed dojo touch events on both the scrollable div and on the multiselect (the template I am using uses dojo). I started looking around in the template’s source to figure out why these events were being attached to all these elements and I noticed a dojo module called «dojo/touch». After removing this module from the project, the elements are working fine in Safari.
The take away is that ‘dojo/touch’ and IOS Safari are totally incompatible.
Источник
Не работает overflow в Safari
Вот эта часть (раздел цены и условия занятий): https://fotki.yandex.ru/next/u. iew/998283 в браузере Safari выглядит очень ужасно.
CSS-свойство overflow:hidden тут как то по-другому работает. Народ, подскажите, как это исправить? А то я уже голову сломал.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Скругление у списков, не работает как надо overflow:hidden в safari
Доброго времени суток и снова о нелегком. Сверстал круглое меню на основе списка ul. В хроме, лисе.
overflow: hidden in Chrome, Safari, Opera
Всем привет! Необходимо сверстать PSD для Joomla, все сделал, но вот в одном месте наткнулся на.
Не работает :focus в Safari
Столкнулся с такой проблемой: имеется кнопка, на ней стоит autofocus, то есть при загрузке страницы.
В Safari не работает input
не отображаются картинки в SAFARI, то есть пользовательские картинки для «input» типа type=»radio».
Не работает скроллинг в Safari
На сайте есть всплывающее меню с длинным списком(модальное окно), при вызова которого блокируется.
Iframe не работает на ios(safari)
Вставил в сайт iframe, во всех браузерах работает, а в safari пусто, как лечить?
Не работает flex-wrap в Safari
Подниму вопрос, или на него ответа нет? Меня конкретно flex-wrap: wrap интересует, как его в сафари.
Добрый день, уважаемые форумчане! Слезно прошу у вас помощи, или хотя бы пинка в направлении, в.
Источник