Nano Hash - криптовалюты, майнинг, программирование

Исправьте div внизу без использования позиции css

У меня проблемы с position: fixed; в Safari IOS8. Я определил, что это связано с элементом нижнего колонтитула, который я размещаю внизу страницы. Я также пробовал position: absolute;, но это тоже не сработало.

Кто-нибудь знает способ разместить это без использования позиции CSS?

Вот код, который я использую:

.foot-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
}
css mobile-safari css-position ios8
01.10.2014

  • что не сработало? не могли бы вы предоставить код? 01.10.2014
  • @rhgb Я добавил CSS, который использую. Когда я удаляю стиль позиции, нижний колонтитул появляется вверху. Если я оставлю его, он будет выглядеть великолепно, но вызовет проблемы с прокруткой в ​​IOS8 Safari. 01.10.2014
  • Я не понимаю, почему вы не проясняете: и то, и другое, и позиционировать его статически, ваша страница действительно крошечная? 01.10.2014
  • @Christina Сайт предназначен для мобильных устройств, поэтому да, он очень маленький, и я не знаю, как гарантировать, что он будет прилипать к нижней части без фиксированной или абсолютной позиции. 02.10.2014
  • Я считаю, что @Quantastical относится к тому, как это делает jQuery mobile. Вот пара вариантов. Посмотрите на ССЦ. Лучше всего работает под нагрузкой. jsbin.com/qiquca/1/edit 02.10.2014
  • jsbin.com/qiquca/1 02.10.2014
  • Спасибо @Christina, к сожалению, это не решило мою проблему, но я ценю помощь :) 02.10.2014
  • безумие, что эта проблема все еще существует по сей день в iOS 12.3 16.06.2019

Ответы:


1

iOS имеет проблемы с фиксированным позиционированием. При прокручивании для прокрутки фиксированное положение не будет обновляться до тех пор, пока не будет отпущено касание/перетаскивание.

Хотя position: fixed; технически работает, мобильный Safari не перерисовывает фиксированный элемент во время прокрутки, чтобы правильно рассчитать анимацию чрезмерной прокрутки (перетаскивание заставляет страницу продолжать прокручиваться в зависимости от скорости прокрутки), поэтому он выиграл не обновляться, пока анимация не остановится.

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

Дополнительные материалы для чтения и примеры, если вам интересно: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

01.10.2014
  • Я видел эту статью, но спасибо за объяснение. Я все еще жду, есть ли у кого-нибудь яркие идеи по позиционированию, но если этого не произойдет, я приму ваш ответ. Ваше здоровье 01.10.2014
  • JQuery mobile делает это, помещая нефиксированное содержимое в прокручиваемый элемент div, который простирается от верхней части окна до нижней части страницы за вычетом высоты фиксированного содержимого. Помимо этого, JavaScript-опрос события прокрутки является единственным вариантом, но даже если вы перепишете эффект слайда перетаскивания/отпускания (я пытался), предотвращение события прокрутки по умолчанию также остановит прокрутку с помощью резиновой ленты, которая не может быть переэмулированы только в JavaScript. 01.10.2014
  • Я не смог найти способ решить свою проблему, но этот ответ объясняет, почему проблема возникает. Спасибо 02.10.2014
  • В конце концов я нашел причину, и мне не пришлось заморачиваться с позиционированием. IOS8 Safari больше не может обрабатывать переходы, что и вызывало все проблемы. Удалил их и все работает. 09.10.2014

    • 2

    Вы должны попробовать position:sticky;. Это сделано для работы с position в Safari. fixed уже много лет является проблемой для мобильных устройств. Я думал, что это было исправлено, но iOS8 тоже ведет себя странно...

    http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    09.10.2014
  • Спасибо, это то, о чем я никогда не знал! 10.10.2014
  • Это сработало для меня, когда у меня была такая же проблема с iOS 8. 29.01.2015
  • он показывает предупреждение на css при попытке использовать position: sticky в сафари, вы уверены, что он все еще доступен? РЕДАКТИРОВАТЬ: О, nvm, это было -moz-sticky :) спасибо! 27.01.2017
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..