ixon

Это невозможно, 3WC пишет по этому поводу:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

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

Дело не в устройстве, а в браузере. И если с первым всё просто, достаточно эмулировать его в каком-нибудь Genymotion или Android Studio AVD, то Айфон эмулировать будет достаточно сложно, но Safari на телефоне слабо отличается от десктопного браузера, поэтому лучше всего для отладки использовать Safari.

Попробуйте явно задать высоту через height, добавьте к блоку свойства:

overflow: hidden;
height: 170px;

https://jsfiddle.net/6t9eru1d/12/
Используйте Masonry.js, если хотите убрать расстояние между блоками верхнего и нижних рядов.

Уменьшайте opacity с 1 до 0, когда оно достигнет 0, ставьте display:none.

Только если у вас квадрат и радиус скругления равен половине высоты:
https://codepen.io/anon/pen/djBKKp
Если же это прямоугольник с произвольными углами, советую использовать border-radius у контейнера, в который будет вписан ваш объект:
https://codepen.io/anon/pen/NBZzEL
или же использовать обтравочные маски svg:
https://developer.mozilla.org/en-US/docs/Web/SVG/T...

https://codepen.io/anon/pen/XBQgKa
Используя css3 анимацию добавим к логотипу ссылку на анимацию coin, установим итерацию в 5 секунд и бесконечное повторение:
animation:coin 5s infinite;

.coin{
  display:block;
  background:url('https://2ch.hk/b/arch/2018-05-23/src/176403732/15270649403080.jpg');
  background-size: 100% 100%;
  width:120px;
  height:120px;
  border-radius:50%;
  animation:coin 5s infinite;
}

Добавим анимацию coin, изменив ширину до 0, затем вернём её в изначальное положение.
И сделаем отступ, чтобы анимация происходила относительно центра монеты.

@keyframes coin {
    0%   {
      width: 120px;
      margin-left:0px;
    }
    50%  {
      width: 0px;
      margin-left:60px;
    }
    100% {
      width: 120px;
      margin-left:0px;
    }
}

Конкретно это сделано без всяких готовых скриптов. На объект создаётся Listener передвижения мыши, в зависимости от того, где он находится относительно верхней левой части блока меняются значения аргументов значений свойства transform, функций rotateX(0deg), rotateY(0deg).
В этом нет ничего сложного. На всё про всё будет около 6 строк кода.

Правильней будет реализовать это через css. Добавить тексту свойства:

text-shadow: 0px 0px 30px ЦветСвечения;
text-fill-color: transparent;
background-clip: text;
background:url(Изображение из размытых точек)

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

Сделай сетку в 5 блоков, в каждый блок помести ещё один, который будет изображать стрелку и иметь параметры вроде этих:

display:block;
position:absolute;
right:-120px;

Примерное решение будет таким:
https://codepen.io/anon/pen/GBwRNm

Практически в любом современном браузере существует ряд инструментов, именуемых Инструментами Разработчика, обычно они включают средства для просмотра сайтов с меньшим экраном.
А вообще, если адаптивность хорошо реализована, достаточно всего лишь изменить размер окна браузера.

Более корректный вариант первый, но подойдёт и второй. Row это как бы ряд колонок и по идее в одном row должен быть только лишь один ряд колонок, однако, на практике это бывает не столь важно.

Сделать это можно лишь с помощью какого-нибудь серверного языка программирования, например с помощью php. Алгаритм такой: открываем css файл, меняем согласно полученным параметрам и сохраняем.

Эту единицу Сафари не поддерживает Попробуйте использовать другие единцы, которые Сафари поддерживает, например vw, которое по сути почти одно и то-же, что и vh, правда не знаю поддерживает-ли его Safari.
Чтобы облегчить перевод всех единиц в вашем коде, попробуйте использовать SCSS, SASS и прочие.
Заставить чем-либо распознавать врятли получится.