Overflow-x: auto; в overflow с border-radius, в конечном итоге на android неправильно отображается

337
12 января 2017, 03:52

Столкнулся с такой проблемой: на android отображается неправильно overflow с border-radius, в классе block_bl нет закруглений когда внутри блока есть блок с прокруткой. На ios все норм и на пк тоже. Пробовал -webkit-mask-image(svg и png) - результат есть, но в итоге все шрифты размытые(наблюдается на устройстве android более 300dpi, на ios - гуд). Пробовал ставить border-radius классу overflow_l, но на android ползунок прокрутки не скрывается. Может есть какие-то предложения? Заранее спасибо.

Пример: JsFiddle

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=cyrillic'); 
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=cyrillic'); 
 
* { 
    margin: 0;  
    padding: 0; 
    box-sizing: border-box; 
	  -webkit-box-sizing: border-box; 
	  -moz-box-sizing: border-box; 
} 
 
body { 
  font-family: 'PT Sans', sans-serif; 
	background-color: #FAFAFA; 
	font-size: 15px; 
  padding: 20px; 
} 
 
a { 
	color: #ACACAC;  
	text-decoration: none; 
} 
 
ul { 
  list-style: none; 
} 
 
.block_bl { 
	display: block; 
	background: #FFF; 
	width: 100%; 
	padding: 0; 
	overflow: hidden;  
	border-radius: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
	box-shadow: 0 4px 10px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); 
	-webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); 
	-moz-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); 
} 
 
.block_bl .overflow_l { 
	position: relative; 
	width: 100%; 
} 
 
.block_bl .overflow_l:before, .block_bl .overflow_l:after { 
	content: ''; 
	position: absolute; 
	top: 0; 
	height: 100%; 
	width: 20px; 
	z-index: 20; 
} 
 
.block_bl .overflow_l:before { 
	left: 0; 
	background: rgba(255,255,255,1); 
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); 
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(43%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); 
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); 
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); 
	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); 
	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(255,255,255,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); 
} 
 
.block_bl .overflow_l:after { 
	right: 0; 
	background: rgba(255,255,255,0); 
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); 
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(57%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); 
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); 
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); 
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); 
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); 
} 
 
.block_bl .overflow_l > div { 
	display: block; 
	overflow-x: hidden; 
	overflow-x: auto; 
	-webkit-overflow-scrolling: touch;  
} 
 
.block_bl ul.admin_links { 
	display: inline-block; 
	vertical-align: top; 
	padding: 0 20px; 
	height: 62px; 
	font-size: 0; 
	white-space: nowrap; 
} 
 
.block_bl ul.admin_links li { 
	display: inline-block; 
	vertical-align: top; 
	height: 100%; 
} 
 
.block_bl ul.admin_links li a { 
	display: block; 
	position: relative; 
	height: 100%; 
	line-height: 60px; 
	font-size: 15px; 
	padding: 0 15px; 
	color: #2F2F2F; 
} 
 
.block_bl ul.admin_links li:first-child a { 
	padding-left: 0; 
} 
 
.block_bl ul.admin_links li.active a { 
	font-weight: bold; 
	color: #2F2F2F !important; 
	background: #FFF; 
	height: 42px; 
	line-height: 41px; 
	padding: 0 20px; 
	margin: 9px 6px 0 6px; 
	border-radius: 23px; 
	-webkit-border-radius: 23px; 
	-moz-border-radius: 23px; 
	box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09), 0 1px 3px 0 rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.06); 
	-webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09), 0 1px 3px 0 rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.06); 
	-moz-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09), 0 1px 3px 0 rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.06); 
} 
 
.block_bl ul.admin_links li.active:first-child a { 
	margin-left: 0; 
} 
 
.block_bl ul.admin_links li.active:last-child a { 
	margin-right: 0; 
} 
 
.block_bl ul.admin_links li a:hover { 
	color: #B1B1B1; 
}
<div class="block_bl"> 
				<div class="overflow_l"> 
					<div> 
						<ul class="admin_links"> 
							<li><a href="#">Главная</a></li> 
							<li class="active"><a href="#">Сайты</a></li> 
							<li><a href="#">Форум</a></li> 
							<li><a href="#">Новости</a></li> 
						</ul> 
					</div> 
				</div> 
			</div>

Answer 1

Ваш текущий код не обрезается бордер-радиусом без оверфлоу хидден потому что сверху у вас наложены псевдоэлементы (пока что мне, правда, непонятно зачем они нужны). Необходимо задать псевдоэлементам соответствующие радиусы и для .block_bl overflow: hidden можно убирать.

Кстати, использовать вендорные префиксы для border-radius, box-sizing и box-shadow уже давно не надо, а linear-gradient достаточно писать в 4 строчки для очень широкой поддержки.

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=cyrillic'); 
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=cyrillic'); 
 * { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
body { 
  font-family: 'PT Sans', sans-serif; 
  background-color: #FAFAFA; 
  font-size: 15px; 
  padding: 20px; 
} 
a { 
  color: #ACACAC; 
  text-decoration: none; 
} 
ul { 
  list-style: none; 
} 
.block_bl { 
  display: block; 
  background: #FFF; 
  width: 100%; 
  padding: 0; 
  border-radius: 10px; 
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03); 
} 
.block_bl .overflow_l { 
  position: relative; 
  width: 100%; 
} 
.block_bl .overflow_l:before, 
.block_bl .overflow_l:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  height: 100%; 
  width: 20px; 
  z-index: 20; 
} 
.block_bl .overflow_l:before { 
  left: 0; 
  border-radius: 10px 0 0 10px; 
  background: rgba(255, 255, 255, 1); 
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 0) 100%); 
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 0) 100%); 
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 0) 100%); 
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); 
} 
.block_bl .overflow_l:after { 
  border-radius: 0 10px 10px 0; 
  right: 0; 
  background: rgba(255, 255, 255, 0); 
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 1) 100%); 
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 1) 100%); 
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 1) 100%); 
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); 
} 
.block_bl .overflow_l > div { 
  display: block; 
  overflow-x: hidden; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
} 
.block_bl ul.admin_links { 
  display: inline-block; 
  vertical-align: top; 
  padding: 0 20px; 
  height: 62px; 
  font-size: 0; 
  white-space: nowrap; 
} 
.block_bl ul.admin_links li { 
  display: inline-block; 
  vertical-align: top; 
  height: 100%; 
} 
.block_bl ul.admin_links li a { 
  display: block; 
  position: relative; 
  height: 100%; 
  line-height: 60px; 
  font-size: 15px; 
  padding: 0 15px; 
  color: #2F2F2F; 
} 
.block_bl ul.admin_links li:first-child a { 
  padding-left: 0; 
} 
.block_bl ul.admin_links li.active a { 
  font-weight: bold; 
  color: #2F2F2F !important; 
  background: #FFF; 
  height: 42px; 
  line-height: 41px; 
  padding: 0 20px; 
  margin: 9px 6px 0 6px; 
  border-radius: 23px; 
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.09), 0 1px 3px 0 rgba(0, 0, 0, 0.11), 0 0 0 1px rgba(0, 0, 0, 0.06); 
} 
.block_bl ul.admin_links li.active:first-child a { 
  margin-left: 0; 
} 
.block_bl ul.admin_links li.active:last-child a { 
  margin-right: 0; 
} 
.block_bl ul.admin_links li a:hover { 
  color: #B1B1B1; 
}
<div class="block_bl"> 
  <div class="overflow_l"> 
    <div> 
      <ul class="admin_links"> 
        <li><a href="#">Главная</a> 
        </li> 
        <li class="active"><a href="#">Сайты</a> 
        </li> 
        <li><a href="#">Форум</a> 
        </li> 
        <li><a href="#">Новости</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как сделать такой переключатель на css?
HTML

Как сделать такой переключатель на css?

Нужно закодить такой переключатель на css+htmlДолжен прыгать индикатор - верхняя зеленая полоска:

 397
Как сделать форму обратной связи с загрузкой нескольких изображений?
HTML

Как сделать форму обратной связи с загрузкой нескольких изображений?

Саму форму и загрузку нескольких изображений я делаю так:

 344
Как связать плагин Dropzone.js с обычной формой обратной связи?
HTML

Как связать плагин Dropzone.js с обычной формой обратной связи?

Мне нужно реализовать возможность отправки нескольких изображений + введенные данные (имя, телефон и тд)

 620
Включение и выключение таблиц стилей
HTML

Включение и выключение таблиц стилей

Как можно сделать переключение css не input-ом, а списком li ну или хотябы ссылкойТ

 322