Некорректная работа свойств border и border-radius на мобильных устройствах

@Aidera · Регистрация: 29.07.2015

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

Доброго времени суток,
произошла интересная вещь:
использовала border-radius:50% и border:6px solid white на картинку
в браузере смотрится шикарно, но на мобильном устройстве (андроид), не отображаются скругления рамки, только по углам видны эти 6px.

Как исправить данную вещь ?
Помогите пожалуйста, буду очень благодарна

@mrtoxas · 15.08.2016, 11:59

В песочнице воспроизвести сможете?

@Aidera · 15.08.2016, 12:04 **[ТС]**

mrtoxas,
да, конечно:

HTML5

<li><a class="general_information_a scrollflow -slide-top -opacity" href="http://brandsmoke.com.ua/information/chto_takoye_elektronnaya_sigareta"><img alt="Что такое электронная сигарета?" src="http://brandsmoke.com.ua/img/general_information/chto_takoye_elektronnaya_sigareta.jpg" title="Информация об электронных сигаретах" /></a></li>

CSS

li{
    display: inline-block;
    margin:0 auto;
    vertical-align: top;
    width:20%;
}
.general_information_a{
    height:400px;
    margin:auto;
    text-align: center;
    display: block;
}
.general_information_a>img{
    width:200px;
    height:200px;
    overflow: hidden;
    border:6px solid white;
    border-radius:50%;
    box-shadow:0px 5px 7px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow:0px 5px 7px rgba(0, 0, 0, 0.5);
        -moz-box-shadow:0px 5px 7px rgba(0, 0, 0, 0.5);
}

https://jsfiddle.net/47ahdsk0/

@mrtoxas · 15.08.2016, 12:10

Андроидо-хром 52.0.2743.98

@monochromer · 15.08.2016, 12:16

Aidera,
попробуйте проставить префиксы. Возможно, браузер достаточно старый

CSS

1
2
3

-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;

@Aidera · 15.08.2016, 12:16 **[ТС]**

mrtoxas,
у меня к сожалению так

@Aidera · 15.08.2016, 12:36 **[ТС]**

monochromer,
не сработало(
и бордер, и бордер-радиус

@mrtoxas · 15.08.2016, 12:39

А попробуйте добавить

CSS

1	perspective: 1px;

@Aidera · 15.08.2016, 12:43 **[ТС]**

mrtoxas,
тоже не помогло

@mrtoxas · 15.08.2016, 13:48

А так?

CSS

ul {
  list-style: none;
}
li {
  display: inline-block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.5);
}
a{
  display: block;
}
img {
  width: 100%;
}

HTML5

<ul>
  <li>
    <a class="general_information_a" href="#">
      <img src="http://brandsmoke.com.ua/img/general_information/chto_takoye_elektronnaya_sigareta.jpg" alt="" /> 
    </a>
  </li>
</ul>

Результат

@Resume · 15.08.2016, 18:11

А какая версия андройда у вас?

@Aidera · 17.08.2016, 12:26 **[ТС]**

Resume, mrtoxas,
Прошу прощения за долгий ответ, не могла нормально сесть за дело (

Перепись стилей с картинки на li не помогло. Закругление работает, но рамка также отображается некорректно.

Версия андроида 4.1.1. Конечно, нужно обновить. Однако, есть пользователи с данной версией, и хотелось бы, чтобы на всех устройствах отображалось одинаково.

Еще раз прошу прощения за долгий ответ

p.s. Скорее всего лучше будет спросить у слубы поддержки андроида

@mrtoxas · 17.08.2016, 12:36

Пробуем дальше

CSS

border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;

Это вместо border-radius: 50%;

Добавлено через 3 минуты
Телефончик, случайно, не Samsung?

@Aidera · 17.08.2016, 12:49 **[ТС]**

mrtoxas,
попробовала, все также.
Поэкспериментировала с бордер. Проблема точно в нем, т.к. от перемены значения в px ничего не происходит

Телефончик HTC.
На других отображается прекрасно.
Тут еще кое-что с position:fixed поломалось ))

Добавлено через 8 минут
mrtoxas,

border, сильное ощущение, что просто застрял на заднем плане, будто z-index кто-то специально прописал.

@mrtoxas · 17.08.2016, 13:12

Попробуйте установить border-radius всем элементам - li,a,img

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

CSS

ul {
  list-style: none;
}
li {
  display: inline-block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  background:#fff;
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.5);
  position: relative;
}
a{
  display: block;
  position: absolute;
  border-radius: 50%;
  top:6px;
  left:6px;
  bottom:6px;
  right:6px;
}
img {
  position: absolute;  
  width:100%;  
  border-radius: 50%;
}

HTML5

<ul>
  <li>
    <a class="general_information_a" href="#">
      <img src="http://brandsmoke.com.ua/img/general_information/chto_takoye_elektronnaya_sigareta.jpg" alt="" /> 
    </a>
  </li>
</ul>

Результат

@Aidera · 17.08.2016, 13:49 **[ТС]**

mrtoxas,
кажется этот вариант сработал )

Не знаю как Вы до этого додумались, но огромное Вам спасибо ^^

@Aidera 1 / 1 / 0 Регистрация: 29.07.2015 Сообщений: 86
	17.08.2016, 12:49 [ТС]	14
	mrtoxas, попробовала, все также. Поэкспериментировала с бордер. Проблема точно в нем, т.к. от перемены значения в px ничего не происходит Телефончик HTC. На других отображается прекрасно. Тут еще кое-что с position:fixed поломалось )) Добавлено через 8 минут mrtoxas, border, сильное ощущение, что просто застрял на заднем плане, будто z-index кто-то специально прописал. 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	15.08.2016, 11:59	2
	В песочнице воспроизвести сможете? 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	15.08.2016, 12:10	4
	Андроидо-хром 52.0.2743.98 Миниатюры 0

@Aidera 1 / 1 / 0 Регистрация: 29.07.2015 Сообщений: 86
	15.08.2016, 12:16 [ТС]	6
	mrtoxas, у меня к сожалению так Миниатюры 0

@Aidera 1 / 1 / 0 Регистрация: 29.07.2015 Сообщений: 86
	15.08.2016, 12:36 [ТС]	7
	monochromer, не сработало( и бордер, и бордер-радиус 0

@Aidera 1 / 1 / 0 Регистрация: 29.07.2015 Сообщений: 86
	15.08.2016, 12:43 [ТС]	9
	mrtoxas, тоже не помогло 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	15.08.2016, 18:11	11
	А какая версия андройда у вас? 0

@Aidera 1 / 1 / 0 Регистрация: 29.07.2015 Сообщений: 86
	17.08.2016, 12:26 [ТС]	12
	Resume, mrtoxas, Прошу прощения за долгий ответ, не могла нормально сесть за дело ( Перепись стилей с картинки на li не помогло. Закругление работает, но рамка также отображается некорректно. Версия андроида 4.1.1. Конечно, нужно обновить. Однако, есть пользователи с данной версией, и хотелось бы, чтобы на всех устройствах отображалось одинаково. Еще раз прошу прощения за долгий ответ p.s. Скорее всего лучше будет спросить у слубы поддержки андроида 0

@Aidera 1 / 1 / 0 Регистрация: 29.07.2015 Сообщений: 86
	17.08.2016, 13:49 [ТС]	16
	mrtoxas, кажется этот вариант сработал ) Не знаю как Вы до этого додумались, но огромное Вам спасибо ^^ Миниатюры 0

Некорректная работа свойств border и border-radius на мобильных устройствах

Решение