Непонятки с реализацией кроссбраузерности

@diargon3454 · Регистрация: 30.09.2013

Студворк — интернет-сервис помощи студентам

Всем привет! Разрабатываю сайт. Во время разработки тестировал на chrome. Решил открыть в другом браузере - проверить. Сначала открыл на смартфоне. Там вообще всё криво. Такое ощущение что там отказывается работать jquerry. Хотя возможно что это связано с тем что я не указывал префиксы для мобильных браузеров. Что делать? Использовать jquery mobile? Потом решил открыть сайт в IE. Там вроде всё норм, но css 3 анимация работает не так как нужно. Не так, как в google crome. Тут я даже не представляю что делать. Что сделать чтоб везде было всё норм? Могу приложить код. Совсем забыл. Сайт. Чтобы посотреть как работает css 3 анимация (проблемный момент) открой/закройте информационную панель нажав на кнопку в верхнем левом углу.

Добавлено через 4 часа 1 минуту
Проблему со смартфоном решил. Осталась кривая анимация в ie. Причём странно - туда нормально, а обратно криво

Добавлено через 7 минут
Вот только почему-то border перестал отображаться как и в ie, так и в смартфоне.

Добавлено через 2 минуты
Не буду приводить весь код. Много кода лишь затряднят поиски решения.

CSS
1
2
3
4
5
6
7
8
9
10
.el1 {
    cursor: pointer;
    position: absolute;
    left: 1.5vw;
    top: 2.75vh;
    width: 5.75vw;
    color: #565656;
    border: .4vmax solid #565656;
    border-radius: 50%;
}

@Shakalaka · 20.06.2015, 21:54

Если сходить , можно увидеть, что ie10,11 не поддерживает vmax, а opera mini и adnroid browser 4.1-4.3 вообще не поддерживают viewport units

@diargon3454 · 20.06.2015, 22:16 **[ТС]**

Я тестировал на MS edge. Он же поддерживает - это раз. И ещё у меня все другие значение, где стоит vmax, vw, vh отображаются нормально. А вот с border-ами что-то не хочет.

Добавлено через 6 минут
А нет ошибся. Ещё раз почитал про подержку. Оказывается поддерживается только vh и vw. Спасибо. А с анимацией то что не так?

Добавлено через 52 секунды
Даже код приводить не имеет смысла. Но анимация сделана так:

CSS
1
2
3
4
5
             -webkit-transition: right 0.4s linear;
    -moz-transition: right 0.4s linear;
    -ms-transition: right 0.4s linear;
    -o-transition: right 0.4s linear;
    transition: right 0.4s linear;

Добавлено через 2 минуты
И кстати, хочется вернуться к прошлому вопросу. По поводу ie понятно. А почему на смартфоне не отображаются рамки? У меня android 4.4 kitkat. Встроенного бразуера нет. Тестировал на dolphin и Lucid browser. Результат один и тот же.

@Shakalaka · 20.06.2015, 22:18

Я извиняюсь, чёт ссылка не вставилась тут

Сообщение от Shakalaka

Если сходить ,

Так вот, если сходить сюда) то вы всё-таки увидите что и ie edge имеет partitial support, а именно не поддерживает vmax

@diargon3454 · 20.06.2015, 22:20 **[ТС]**

Сам только отсюда.

@Shakalaka · 20.06.2015, 22:24

Как вариант, попробуйте заменить viewport units на пиксели, и посмотрите будет ли работать в проблемных браузерах

@diargon3454 · 20.06.2015, 22:27 **[ТС]**

Тогда нормально работает. Но мне хочется резиновый сайт. А проценты берут значения от родителя, а не от всего документа. Поэтому проценты не вариант. Ну тут можно попросту всё решить через js, но мне лень его использовать.

@Shakalaka · 20.06.2015, 22:38

Ну если вы рисуете какой-то дизайн, то выбираете какие значения будут у элементов. Вы же не с потолка взяли значение .4vmax? И вообще не должно быть ничего "абсолютно резинового" у всего должны быть границы. Вряд ли ваш сайт будет смотреться нормально на мониторе в 23" если он будет тянуться на всю ширину. Так что можно спокойно использовать процентные значения. Просто нужно брать калькулятор и считать. Если же сильно хочется использовать viewport units поддержка которых ограничена, тогда не стоит искать кроссбраузерности

@diargon3454 · 21.06.2015, 03:12 **[ТС]**

Вообще-то с потолка - методом тыка. Пробовал делать пикселями. И на моём 3,5 экране телефона это выглядит как-то не очень. Вообще я кроссбраузерность не ищу. Это так мой первый, и скорей всего последний, сайтик. Делаю себе портфолио-страничку. Просто решил ради любопытства открыть в телефоне. Результат был не такой как ожидал. Я не думаю что мой сайт будут открывать на смартфонах. Просто было бы хорошо если бы он везде открывался корректно. Ну нет - так нет. Попробую поискать альтернативы, либо использовать js. Соответсвенно результат поисков выложу сюда. А вот к анимации в ie я отношусь более серьёзно. Её просто необходимо исправить.

Добавлено через 1 час 21 минуту
Как я и обещал пишу своё решение. Увы ни чё нового не придумал. Решил так, что если не хотят отображать vmax, то создадим свой vmax. Как говорится, если гора не идет к Магомеду, то Магомед идет к горе.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    var window_width = $("html").width();
    var window_height = $("html").height();
    var window_max;
    
            if (window_width > window_height)
        {
           window_max =  window_width;
        }
        else
        {
            window_max =  window_height;
        }
$(document).ready(function() {
    $('.el1').css('border', (window_max*0.4)/100 + 'px' + ' ' + 'solid #565656');
});

Добавлено через 8 минут
Сайт обновил. Проверил. Всё работает. Осталось разобраться с анимацией. И, кстати, на смартфоне анимация работает нормально. Такая хрень только с ie.

Добавлено через 2 часа 39 минут
Данный код походит не для всего. Порой приходится задавать начальные значения. Пришлось отказаться ои идеи vmax. Без него у меня компьютерах в горизонтальной ориентации экрана всё криво. Ну плюс ie. Жаль.

Добавлено через 4 минуты

Сообщение от Shakalaka

Вряд ли ваш сайт будет смотреться нормально на мониторе в 23" если он будет тянуться на всю ширину.

Мой сайт смотрится нормально при любом разрешени. Я проверил. Даже если квадратное разрешение (высота-ширина 1:1) всё нормально.

@Shakalaka · 21.06.2015, 09:49

Сообщение от diargon3454

Проверил. Всё работает

Нужно ваш код прикрутить и к window.onresize. А то при ресайзе окна не будет меняться значения у этого бордера

@diargon3454 · 22.06.2015, 14:11 **[ТС]**

За ресайз спасибо. Но я просто сделал 2 версии css (для горизонтальной и вертикальной ориентации). Можно сказать 1 проблему решил.
Попробовал вставить это:

HTML5
1
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>

- Не помогло. Ну больше гугл мне ничего существенного не выдал.

Добавлено через 2 минуты
Это я всмысле о проблеме с анимацией

Добавлено через 20 часов 1 минуту
Up-аю. Это же обычная css анимация. Неужели никто не сталкивался с такой проблемой?

@Shakalaka · 22.06.2015, 14:23

Так а в чем проблема анимации? У меня сейчас ie нету, тестировал на одном сервисе так там вроде норм, работает анимация. И попробуйте так, как я раньше говорил, убрать vw. У вашей .info_panel{right:20.5vw;} попробуйте заменить vw на пиксели. Я думаю в этом может быть проблема, т.к. ie 10+ поддерживает transiotion

@diargon3454 · 22.06.2015, 15:13 **[ТС]**

Пробовал то же самое. В chrome и андройде анимация корректная. Движется туда обратно. В ie - туда нормально. Обратно нет. Исчезает и движется с конца слева. Сейчас видео пришлю.

Добавлено через 20 минут

Кликните здесь для просмотра всего текста

Добавлено через 15 минут
Обновлённое видео. Там в ms более медленней.

Кликните здесь для просмотра всего текста

Добавлено через 5 минут
*ms ie

@Shakalaka · 22.06.2015, 15:34

Честно говоря, даже предположений нет. Там у вас в консоли ошибка js выскакивает, но это из разряда "а вдруг" А так... Не знаю(

@diargon3454 · 22.06.2015, 15:40 **[ТС]**

Это не ошибка. Я просто вместо != (не равно) вставил <>. Это у меня редирект. И к анимации он никакого отношения не имеет. Такие же ошибки есть на каждом 2 сайте. Можете открыть сайт Вконтакте. Там вообще пишет что 50 ошибок.

@diargon3454 · 23.06.2015, 15:47 **[ТС]**

Снова up-аю. Ладно уже почти 190 просмотров. До 250 доведу и больше up-ать не буду.

@diargon3454 · 24.06.2015, 21:42 **[ТС]**

Мммммм.... Уже 208. И все эти 208 не знают как корректно анимировать css3 в ie?

@Fedor92 · 24.06.2015, 22:22

Сообщение от diargon3454

Мммммм.... Уже 208. И все эти 208 не знают как корректно анимировать css3 в ie?

diargon3454, может это один Shakalaka смотрит...

Ммммм... Где-то я уже видел эту страницу... Там, что в ie тремор, что в хроме... Как-то код под один знаменатель можно подвести...?

@diargon3454 · 25.06.2015, 03:35 **[ТС]**

Сообщение от Fedor92

Как-то код под один знаменатель можно подвести...?

Сейчас уже изменил код. Но анимация в ie такая же. Примерный вариант, который был у меня (самый простой):

HTML5
1
<div class="myCLASS">

CSS
1
2
3
4
5
6
7
8
.myCLASS {
position: absolute;
left: 0px;
+ transitions
}
.slide {
left: 50px;
}

JavaScript
1
Добавить/удалить класс slide элементу с классом myCLASS при помощи toogleCLASS

Как-то так.
Ну могу привести весь код на нынешний момент если нужно. Но что-то мне подсказывает что дофигища кода не поможет решить проблему

Сообщение от Fedor92

Там, что в ie тремор

Кажись у меня очень маленький словарный запас. Если говорить по русски, то что значит тремор?

Добавлено через 3 часа 14 минут

Сообщение от Fedor92

Где-то я уже видел эту страницу...

Ну я уже создавал похожую тему. Тогда тоже проблема была в ie. И тоже связанна с анимацией. Мне здесь никто не помог. Пошёл ещё на 2 форума. Тогда решил обратиться за рубеж. - на официальный форум jquery. Скинул ссылку на мой сайт. Мне ответили. Похвастались что у них макбук, и на нём всё гуд. И действительно! Открыл потом в chrome, всё нормально. В результате оказалось что просто у меня дерьмовая видеокарта, а ie дерьмовый браузер, не поддерживающий gpu ускорения. В этом и была проблема. Больше на ie не сидел.

@deeand7 · 06.08.2015, 12:58

Всем привет!
Хочу тоже задать вопрос насчет параллакса и связанные с ним проблемы.
Есть вот такая страничка, на которой присутствует (должен присутствовать) параллакс картинки.
В Safari 9.0 и в Firefox 38.0.5 параллакс работает, а в Chrome 44.0 и Opera 30.0 - не работает. Сайт в IE 8,9,10 я даже боюсь открывать.
Код параллакса в CSS:

CSS
1
2
3
4
5
6
7
8
9
10
.rus {
    background: url(img/redsquare.jpg) no-repeat center center;
    z-index: 2;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding: 30px 0;
}

В PHP параллакс обвернут в section:

PHP
1
2
3
4
5
6
<section class="rus ruover">
    <div class="section-title text-light"><h2>Nabízíme níže uvedené typy jazykových kurzů:
        <!-- <span>but <em>design</em> 'aint one</span> --></h2>
    </div>
    <!-- <a href="#portfolio" class="down-arrow-btn"><i class="fa fa-chevron-down"></i></a> -->
</section>

Эту проблему уже давно не могу решить. По-любому, где-то туплю.
Ребят, подскажите в чём может заключаться корень проблемы?
Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	20.06.2015, 21:54
	Если сходить , можно увидеть, что ie10,11 не поддерживает vmax, а opera mini и adnroid browser 4.1-4.3 вообще не поддерживают viewport units 1

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	20.06.2015, 22:20 [ТС]
	Сам только отсюда. 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	20.06.2015, 22:24
	Как вариант, попробуйте заменить viewport units на пиксели, и посмотрите будет ли работать в проблемных браузерах 0

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	20.06.2015, 22:27 [ТС]
	Тогда нормально работает. Но мне хочется резиновый сайт. А проценты берут значения от родителя, а не от всего документа. Поэтому проценты не вариант. Ну тут можно попросту всё решить через js, но мне лень его использовать. 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	20.06.2015, 22:38
	Ну если вы рисуете какой-то дизайн, то выбираете какие значения будут у элементов. Вы же не с потолка взяли значение .4vmax? И вообще не должно быть ничего "абсолютно резинового" у всего должны быть границы. Вряд ли ваш сайт будет смотреться нормально на мониторе в 23" если он будет тянуться на всю ширину. Так что можно спокойно использовать процентные значения. Просто нужно брать калькулятор и считать. Если же сильно хочется использовать viewport units поддержка которых ограничена, тогда не стоит искать кроссбраузерности 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	22.06.2015, 14:23
	Так а в чем проблема анимации? У меня сейчас ie нету, тестировал на одном сервисе так там вроде норм, работает анимация. И попробуйте так, как я раньше говорил, убрать vw. У вашей .info_panel{right:20.5vw;} попробуйте заменить vw на пиксели. Я думаю в этом может быть проблема, т.к. ie 10+ поддерживает transiotion 0

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	22.06.2015, 15:13 [ТС]
	Пробовал то же самое. В chrome и андройде анимация корректная. Движется туда обратно. В ie - туда нормально. Обратно нет. Исчезает и движется с конца слева. Сейчас видео пришлю. Добавлено через 20 минут Кликните здесь для просмотра всего текста Добавлено через 15 минут Обновлённое видео. Там в ms более медленней. Кликните здесь для просмотра всего текста Добавлено через 5 минут *ms ie 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	22.06.2015, 15:34
	Честно говоря, даже предположений нет. Там у вас в консоли ошибка js выскакивает, но это из разряда "а вдруг" А так... Не знаю( 0

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	22.06.2015, 15:40 [ТС]
	Это не ошибка. Я просто вместо != (не равно) вставил <>. Это у меня редирект. И к анимации он никакого отношения не имеет. Такие же ошибки есть на каждом 2 сайте. Можете открыть сайт Вконтакте. Там вообще пишет что 50 ошибок. 0

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	23.06.2015, 15:47 [ТС]
	Снова up-аю. Ладно уже почти 190 просмотров. До 250 доведу и больше up-ать не буду. 0

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	24.06.2015, 21:42 [ТС]
	Мммммм.... Уже 208. И все эти 208 не знают как корректно анимировать css3 в ie? 0