safari border radius overflow

Safari bug, border-radius with overflow hidden and image scale zoom animation

A short article for a CSS Safari hack for zoom overflow and border-radius using -webkit-mask-image.

How to fix the safari CSS border-radius bug on a zoom with overflow hidden on the parent container?

It’s a little bug happening only on Safari. To fix it, just add the following on the parent container class

You would also have overflow: hidden; on the parent container.

Bye-bye Safari bug!

Copyright © 2016-2024. All rights reserved. Designed and coded by Denis Bouquet

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

border-radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse .

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Constituent properties

This property is a shorthand for the following CSS properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

The border-radius property is specified as:

• one, two, three, or four <length> or <percentage> values. This is used to set a single radius for the corners.
• followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

For example:

Formal definition

Formal syntax, live samples.

• Sample 1 : https://jsfiddle.net/Tripad/qnGKj/2/
• Sample 2 : https://jsfiddle.net/Tripad/qnGKj/3/
• Sample 3 : https://jsfiddle.net/Tripad/qnGKj/4/
• Sample 4 : https://jsfiddle.net/Tripad/qnGKj/5/
• Sample 5 : https://jsfiddle.net/Tripad/qnGKj/6/

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Border-radius-related CSS properties: border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-start-start-radius , border-start-end-radius , border-end-start-radius , border-end-end-radius

深究 Safari 下 border-radius & overflow 不生效的问题

前两天在做需求的时候，发现了 Safari 浏览器（包括 iOS 平台各浏览器）下有一个渲染的 Bug，其他则没问题。

其实就是简单地在 .box 中添加了 overflow: hidden; border-radius: 30px; 做一个圆角处理。上图为预期表现。 但是在 Apple 的 WebKit 平台（不包含 Chrome 的 Blink 平台），就出现问题了 👇

是 overflow: hidden 处理无效？还是 border-radius 的问题？

解决方法很多，我们先深究下原因。

前面，我们给 <img> 添加了 transform: translateZ(10px) ，于是该元素产生了 Composite Layer（合成层）。

而 Webkit 内核中， border-radius 对含有 Composite Layer 的元素的裁剪是存在 Bug 的，该问题可以追溯到 2011 年，很早就有人提出问题了。

Bug 68196: border-radius clipping of composited layers doesn't work

发现该 Bug 在 2022 年 9 月 7 日已被标记为「RESOLVED FIXED」，在 2022 年 10 月 19 日发布的 Safari Technology Preview 156 中已修复。好家伙，这问题整整十多年才解决。

隔壁 Blink 内核（基于 Webkit 的一个分支）则在 2017 年 1 月 24 日修复。

• Issue 157218: border-radius clipping without a stacking context does not apply to composited children

我们只要在 border-radius 的元素上添加一个可创建 Stacking Context（层叠上下文）的 CSS 属性即可。比如 transform: scale(1) 、 transform: translateZ(1px) 、 isolation: isolate 、 position: relative; z-index: 0 等等。

• 从语义角度考虑，个人更偏向使用 isolation ，它表示该元素是否必须创建一个新的层叠上下文。
• 从兼容性角度考虑，相比 isolation，transform 或 position + z-index 会更好一些。
• border-radius clipping of composited layers doesn't work
• border-radius clipping of composited layers doesn't work #3883
• Overflow: hidden with border radius not working on Safari
• 人面猴 序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解... 沈念sama 阅读 151,829 评论 1 赞 331
• 死咒 序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都... 沈念sama 阅读 64,603 评论 1 赞 273
• 救了他两次的神仙让他今天三更去死 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些... 开封第一讲书人 阅读 101,846 评论 0 赞 226
• 道士缉凶录：失踪的卖姜人 文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不... 开封第一讲书人 阅读 42,600 评论 0 赞 191
• 港岛之恋（遗憾婚礼） 正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我... 茶点故事 阅读 50,780 评论 3 赞 272
• 恶毒庶女顶嫁案：这布局不是一般人想出来的 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一... 开封第一讲书人 阅读 39,695 评论 1 赞 192
• 城市分裂传说 那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决... 沈念sama 阅读 31,136 评论 2 赞 293
• 双鸳鸯连环套：你想象不到人心有多黑 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我... 开封第一讲书人 阅读 29,862 评论 0 赞 182
• 万荣杀人案实录 序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经... 沈念sama 阅读 33,453 评论 0 赞 229
• 护林员之死 正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日... 茶点故事 阅读 29,942 评论 2 赞 233
• 白月光启示录 正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。... 茶点故事 阅读 31,347 评论 1 赞 242
• 活死人 序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带... 沈念sama 阅读 27,790 评论 2 赞 236
• 日本核电站爆炸内幕 正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境... 茶点故事 阅读 32,293 评论 3 赞 221
• 男人毒药：我在死后第九天来索命 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日... 开封第一讲书人 阅读 25,839 评论 0 赞 8
• 一桩弑父案，背后竟有这般阴谋 文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响... 开封第一讲书人 阅读 26,448 评论 0 赞 181
• 情欲美人皮 我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还... 沈念sama 阅读 34,564 评论 2 赞 249
• 代替公主和亲 正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚... 茶点故事 阅读 34,623 评论 2 赞 249

推荐阅读 更多精彩内容

• 一个父元素的border-radius不生效的问题 问题： 遇到一个圆角的问题，设置了父元素的border-radius，但不生效。 解决过程： 偶然间，通过设置ov... 请叫我Pro大叔 阅读 18,219 评论 0 赞 4
• 微信小程序 ios border-radius元素 overflow:hidden失效问题 问题 父元素使用border-radius 和 overflow：hidden；子元素使用了transform属性... FSYu 阅读 968 评论 0 赞 0
• border-radius元素overflow:hidden失效问题 父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属... 火山部落 阅读 1,318 评论 0 赞 2
• border-image和border-radius不能同时生效问题——实现带渐变的边框圆角 实现的效果： 按照平时写样式的思路，border-image实现渐变效果，border-radius实现边框圆角，... 菲儿_cdd4 阅读 3,089 评论 0 赞 0
• 圆角效果border-radius 1.什么是CSS3？ 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C... Mandy_jin 阅读 596 评论 0 赞 0

Instantly share code, notes, and snippets.

domske / safari-fix-overflow-border-radius.md

• Download ZIP
• Star 21 You must be signed in to star a gist
• Fork 2 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save domske/b66047671c780a238b51c51ffde8d3a0 to your computer and use it in GitHub Desktop.

There is a bug in Safari when using border-radius and overflow: hidden . Especially when applying transform to a child. In this case, overflow: hidden does not always work. The child ignores the border radius and overflows. It's a very old bug. And sadly it seems that it will never be fixed. Anyway, we can't wait for it.

There are some workaround. We need to place the element with the overflow attribute into a stacking context. I've tested the following workarounds on the latest version of iOS (14.4). You can choose what you want. But you should search the web for the particular attribute. (e.g. will-change should be rarely used. See docs )

Use this on the element with overflow: hidden and border-radius :

Let me know if this fixed your problem or not. Personally, I use transform or z-index . These are probably the most harmless properties. But feel free to post your opinion and other great solutions.

tklkalok commented Jul 14, 2022

Nice and Detail workaround, appreciate your effort and hope Apple would some how fix it in the future.

Sorry, something went wrong.

hirenpanchal1608 commented Jul 26, 2022

Nice solution! transform: translateZ(0); works for me

JoiGud commented Nov 29, 2022

Nice workaround. The translateZ worked for me!

mosuzi commented Dec 5, 2022

Unfortunately, neither those above worked for me :(

fdambrosio commented Dec 6, 2022

good, it works to fix on ios 16 !

jowc commented Jan 22, 2023

Thanks. The z-index worked for me. :)

cesswhite commented Feb 11, 2023

Thank you, two solutions work for me in CSS: 1.- mask-image: radial-gradient(white, black); 2.- will-change: transform;

In UnoCSS/TailwindCSS this class work for me: will-change-transform

alexhartan commented Feb 21, 2023

You are the man! This fix just solved a bunch of headaches for me

SebHex commented Apr 2, 2023

Using the Tailwind CSS class transform-gpu worked for me

This is similar to using the following CSS:

dsajlovic commented Apr 11, 2023

April 2023 still with the same problem, ONLY in Safari -.- Thank you for posting workaround :)

minhoyooDEV commented Apr 12, 2023

Frederick-88 commented Apr 13, 2023

transform: translateZ(0); works for me in 2023 - thanks a lot!

btlm commented Apr 20, 2023

z-index: 0; works as charm

kaiwen-wang commented May 15, 2023 • edited

confirming tailwind will-change-transform works

VolodymyrShtef commented May 15, 2023

Thanks, z-index did the job

alexfranco90 commented Jun 1, 2023

Thanks, both z-index: 0; and transform: translateZ(0); works for me. In my case will-change: transform works too but i was trying to find an alternative.

MartinMalinda commented Sep 3, 2023

hieuthien commented Sep 5, 2023

Thanks you, all thing works with my CSS =]]

wojciak commented Nov 20, 2023

NeroTesalo commented Mar 13, 2024

I love you for this! Solution 2: transform: translateZ(0) save my life free from this awful bug

사파리 overflow:hidden + border-radius 관련 이슈 해결법

사파리에서 overflow:hidden + border-radius 관련 문제를 해결했던 과정을 공유합니다

올해 블로그를 만들면서 나름대로 검수 작업(?)을 거쳤습니다. 대단할 것도 없지만, Mac의 스크린 리더인 VoiceOver 를 사용해서 제 사이트를 직접 '들어'보기도 하고, 키보드로만 조작이 가능한지 테스트해보기도 했습니다. (이와 관련한 부분은 따로 준비해 포스팅할 예정입니다)

크롬에서만 작업하다가 데스크톱 사파리, 아이폰으로 테스트했을 때 문제가 발생했습니다. 아래와 같은 코드(예시)였는데요.

블로그의 포스트 카드를 구현하는 과정에서 카드의 모서리를 둥글게 만들고 싶었습니다. image 를 div 로 감싼 후, div 에 overflow:hidden 과 border-radius 를 줘 스타일을 구현하려고 했습니다. div 에 마우스 포인터를 대면 image 의 scale 이 커지는 식의 인터랙션을 추가로 넣었습니다.

크롬에선 정상적으로 잘 작동했는데, 이상하게 사파리 에선 그렇지 않았습니다. 호버 이벤트를 발생시켰을 때, 애니메이션 시간 동안 border-radius 가 제대로 동작하지 않는 것처럼 보였습니다.

결론부터 말하면 사파리의 렌더링 엔진 Webkit의 버그 라고 합니다.

문제 발생 초기엔 브라우저 렌더링 과정 중 '합성'에 관련된 문제인 줄 알았습니다. 레이어 패널을 확인해봤을 때, 애니메이션에 의해 레이어가 생성되는 때와 버그가 발생하는 때가 일치했기 때문입니다.

'레이어가 생성됐다 사라지는 게 아니고, 처음부터 생성된 상태라면 버그도 사라지지 않을까?' 라는 생각에, 레이어를 강제로 생성해주기로 했습니다. transform: translateZ(0) 와 will-change: transform 스타일을 적용했을 때, 사파리 개발자 도구의 레이어 패널에서 아래와 같이 레이어가 새로 생성되는 걸 확인할 수 있었습니다. 그리고, 버그도 깔끔하게 사라졌습니다!

'🤔 정확히 어떤 이유인지는 모르겠지만 레이어가 처음부터 생성돼있었기에, overflow: hidden 이 같은 위계(?)에 놓이게 되고, 그래서 잘 동작하는 건가?'라고 이해하고 넘어가려는 찰나, stack overflow에서 관련된 답변 을 보게 됩니다. 쌓임 맥락(stacking context) 에 관한 글이었습니다.

쌓임 맥락(stacking context)

MDN 문서에서 쌓임 맥락을 아래와 같이 정의하고 있습니다.

쌓임 맥락 (stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.

그리고 쌓임 맥락을 만드는 CSS 속성들을 나열해뒀습니다.

문서의 루트 요소. ( <html> ) position 이 absolute 또는 relative 이고, z-index 가 auto 가 아닌 요소. position 이 fixed 또는 sticky 인 요소. ( sticky 는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음) 플렉스( flexbox ) 컨테이너의 자식 중 z-index 가 auto 가 아닌 요소. 그리드( grid ) 컨테이너의 자식 중 z-index 가 auto 가 아닌 요소. opacity 가 1 보다 작은 요소. (불투명도 명세 참고) mix-blend-mode 가 normal 이 아닌 요소. 다음 속성 중 하나라도 none 이 아닌 값을 가진 요소. transform filter perspective clip-path mask / mask-image / mask-border isolation 이 isolate 인 요소. -webkit-overflow-scrolling 이 touch 인 요소. will-change 의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소. contain 이 layout , paint , 또는 둘 중 하나를 포함하는 값( strict , content 등)인 요소.

이전엔 ' z-index 를 통해서 엘리먼트들이 쌓이는 순서를 정할 수 있다' 정도로만 알았는데, 굉장히 많은 속성들로 쌓임 맥락을 만들어낼 수 있다는 사실을 알았습니다.

답변에서 ' overflow: hidden 이 적용된 요소를 쌓임 맥락에 포함시키면 된다' 라고 써있었기에 Wrapper 에 위의 쌓임 맥락을 만드는 CSS 속성 중 하나인 isolation: isolate 속성을 적용해봤습니다.

그런데 놀랍게도 잘 작동했습니다. 레이어 패널에서 확인해봤을 때, 레이어가 생성되지 않았음에도 불구하고 말이죠! 레이어가 생성되지 않았기 때문에, 메모리도 더 적게 차지했습니다. 확실히 답변대로 버그의 원인은 레이어의 생성 여부가 아니라, 쌓임 맥락 에 관련된 것이란 사실을 알게 됐습니다.

아래는 stack overflow 답변의 전문입니다. 총정리라고도 볼 수 있겠네요.

This is caused by an one of several unresolved bugs in WebKit, the rendering engine used by Safari : -> 사파리의 렌더링 엔진 Webkit의 버그다... Border-radius clip of non-stacking composited descendant doesn't work overflow: hidden + border radius does not work when transform is added to child As Simon Fraser writes in the second link: You can work around it in recent builds by making the element with overflow:hidden into a stacking context (e.g. position:relative, z-index:0).

-> 버그를 해결하기 위해선 overflow: hidden 을 사용한 엘리먼트를 쌓임 맥락(stacking context)에 포함시키면 된다.

This is probably the simplest solution since, unlike some of the other answers here, it does not unnecessarily introduce render layers.

-> 이 방법은 렌더링 계층을 불필요하게 도입하지 않기 때문에 가장 간단한 솔루션이다.

overflow: hidden 스타일을 적용할 엘리먼트를 쌓임 맥락에 포함시키면 됩니다.

position 이 absolute 나 relative 일 경우 z-index

isolation 으로 쌓임 맥락을 생성해주는 방법이 가장 좋아 보이지만, 상황에 따라 가장 적절한 방법을 취사선택 해야겠습니다.

아무래도 버그라서 그런지, MDN 문서에서 제시하고 있는 '쌓임 맥락에 포함시키는 방법' 중에서도 먹히지 않는 방법이 있었습니다. 저의 경우 아래 방법들은 원하는 대로 동작하지 않았습니다. 꼭 직접 체크해보세요!

• --webkit-overflow-scrolling: touch
• contain: paint or contain: layout

mask-image 속성을 통해 동일하게 쌓임 맥락을 생성해서 문제를 해결합니다.

• MDN 쌓임 맥락(Stacking Context)
• stack overflow: overflow hidden with border radius not working on safari

The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you’ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you set the overflow value to hidden , the image will cut off at 200px.

• visible : content is not clipped when it proceeds outside its box. This is the default value of the property
• hidden : overflowing content will be hidden.
• scroll : similar to hidden except users will be able to scroll through the hidden content.
• clip : content is clipped when it proceeds outside its box. This can be used with overflow-clip-margin to set the clipped area.
• auto : if the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.
• initial : uses the default value which is visible
• inherit : sets the overflow to the value of its parent element.

Remember that text will naturally wrap at the end of an element (unless white-space is changed) so text will rarely be the cause of overflow. Unless a height is set, text will just push an element taller as well. Overflow comes into play more commonly when explicit widths and heights are set and it would be undesirable for any content to spill out, or when scrolling is explicitly being avoided.

If you don’t set the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this property to visible unless you are overriding it from being set elsewhere.

The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. For example:

Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.

The opposite of the default visible is hidden . This literally hides any content that extends beyond the box.

Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.

iOS’ momentum scrolling can be enabled for this value with -webkit-overflow-scrolling .

Note: In OS X Lion, when scrollbars are set to only show when being used, scroll behaves more like auto , in that only needed scrollbars will show up.

Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them. The scrollbars will only show up if there is content that actually breaks out of the element.

overflow-x and overflow-y

It’s also possible to manipulate the overflow of content horizontally or vertically with the overflow-x and overflow-y properties. For example in the demo below the horizontal overflow can be scrolled through whilst the text that extends beyond the height of the box is hidden:

Clearing floats

One of the more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at the element, it self-clears . This means that the element with overflow (any value except visible ) will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared. Like this:

A better float clearing technique is the clearfix , as it doesn’t require you to alter the overflow property in a way you don’t need.

Generating block formatting context

It’s interesting to note that overflow will also create a new block formatting context which is useful if we want to align a block element next to a floated one. In the example below we show how a number of paragraphs will interact with a floated image by default and then we use overflow: hidden to align the text within its own box:

This comes from a great post by Nicole Sullivan which went on to inspire the media object .

Can scrollbars be styled with CSS?

You used to be able to style scrollbars in IE (v5.5?) but no more. You can style them now again in WebKit browsers. If you need cross-browser custom scrollbars, look to JavaScript .

If an element needs to have scrollbars appended to honor the overflow value, Firefox puts them outside the element, keeping the visible width/height as declared. IE puts the scrollbars inside, keeping the overall width/height as declared.

Demos for this article taken from this sample page .

Browser Support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

More information.

• Understanding the Humble Clearfix
• Overflow: a secret benefit
• Overflow on MDN
• Overflow on W3C
• Finding/fixing unintended body overflow

Good stuff… but I want to mention “overflow-x” and “overflow-y” CSS properties. These come in handy sometimes!

Really helpful, Thank you :D

Hi, in android os, overflow: scroll; -webkit-overflow-scrolling: touch; not supported

Hello, I appreciate your effort! But I have been dealing with a problem. I have a five set of images in slideshow inside a div element and the layout of the webpage is properly fluid. Using overflow on the div element either adds scrollbars to the div element or cuts the image (which looks very awkward). Please suggest me something so that the image doesn’t overflow.

use overflow-x:hidden; this is more good

OMG, I wanna have your baby. I’ve been farting with this no scrollbar problem in IE9 for four hours now and your solution to take out overflow: visible and let the browser default to the scroll bars was positively bril. Thank you!

That is the big “stretch” these con artists are selling.

Any idea if this is possible when the container element does not have a fixed width? In other words, where the wrapper is not explicitly set but is instead defined by the page wrapper or body? (In other words, ‘100%’)

I want to create a scrollable subnavigation that can have a width as large as the viewport of a mobile device and may adapt depending on screen orientation.

I should clarify that it is to be scrollable along the x-axis only.

Was there a response to this question? I have the same requirement. Thanks, Bill. The question was “..is possible when the container element does not have a fixed width? In other words, where the wrapper is not explicitly set but is instead defined by the page wrapper or body? (In other words, ‘100%’)”

This is doubtlessly too late, but I sure would have appreciated an answer to this thread last week, so here’s what I figured out.

I was never able to get it working with 100% width in its containing element, but things went pretty easy once I switched to vw units (a unit that is 1% the size of the viewport). If you’re aiming to do the full width of the viewport anyway, 100vw is a fine alternative to 100% .

In my specific case, I actually wanted a horizontal scrollable to be placed next to a fixed-width column. Since using 100% kept giving me trouble, I put a calc() in to subtract out the column’s width from the total viewport: calc(100vw - 470px) .

I needed to use overflow-x: hidden and overflow-y: auto to remove the scrollbars in Chrome Android and unfortunately it also removes momentum scroll in Safari iOs. I add -webkit-overflow-scrolling: touch and Safari iOs get momentum scroll back. It’s so great, it saved me hours and hours, thank you Chris !

nice artical…..

In the first case where I don’t want the image to stick out of the div and be visible The overflow: hidden doesn’t work for safari. Do you know a work around it? I read that safari has a bug with position and overflow. I took out position complete still it gives me the same issue can you please suggest any work around that you may have for Safari

example code:

Is there any idea how to make a position fixed object able to scroll within its container inside mobile?

NOTE: you cannot use overflow:auto or overflow:scroll on a <fieldset> tag, in Firefox at least. The same likely applies in other browsers. Stick your overflow CSS on a <div> instead.

My experience is that you can but why would you want to… The point of a fieldset I would think is to use in conjuration with a legend at which point if you did scroll your legend will be overlapping onto your text and looking bad. I agree with you that using overflow options in that scenario should be used on a div within the fieldset, and if you are not going to use a legend then use a div with a border instead of a fieldset.

Yeah, it wouldn’t necessarily be a good idea in the first place. I just wanted to document this here, as it took a bit of head scratching to figure out what was going on, and I didn’t want others to make the same mistake.

Of course, similar things can happen for <td> tags… i.e. there are some style rules that don’t work on certain tags (at all, or as expected, or behave differently in different browsers), in which case wrapping a <div> on the inside and styling it instead, is often the easiest solution.

Much informative.. I will surely appreciate the simple language explanation of complex techie stuff..

Isnt there a way in which the image from the example above scales down perfectly in size to fit the specified width of the container, just as the case of a responsive image sort of, with any part of it been cut off.

If it is a background image you can set the size to contain

… and if its an element, simply use the max-width: 100%; declaration.

Great!!! IT helped me..

Thanks for writing this!

Quick question, I’m using static heights and widths to make big clickable boxes on a responsive design. I set the properties to relative positioning with overflow hidden so that they align well, but in safari overflow hidden doesn’t work. Any ideas on making it work?

Meanwhile I’ll be using the clear fix you recommended and floating the elements. Thanks!

To remove the horizontal scrollbars when you don’t need them, I think you can do overflow-y: scroll; overflow-x: hidden; It leaves the vertical scrollbars while taking out the horizontal ones

How to change the scrollbars color?

how to make scrollbars visible both on android as well as ios…

Great article! I’m currently experiencing some troubles on Android 4.4.2 (Samsung Tab) where I cannot get the overflow containers to scroll. Your demo works fine on the same device. On my phone (Android) and other test-devices (iPhone, iPad) it works just fine.

Does anybody know of a current Android ‘overflow: scroll’ or ‘overflow: auto’ problem? Or does anyone have the same issues.

Can’t provide the dev code, but I think all the relevant css is there:

Any help would be great!

Hi, i have problem with overflow-x:hidden and overflow-y:visible. Here is example: https://jsfiddle.net/31mkqbwp/2/ why when I set overflow-x:hidden on #container, overflow-y:visible is not working and there is always vertical scrollbar?

Hello, I am trying to add multiple select in a div which is having a overflow:scroll but the drop down is within the div it has to appear outside the div. Can you please suggest me how to solve the issue.

https://jsfiddle.net/irshadmb/a3z5ccax/

Overflow tag not working?! I want to create the whole div element of 200 by 200 like this: http://weedbeats.com/resident-djs/ When you hover over artist’s images…

HTML CODE: ”’

Hello 200X200

”’

CSS CODE: ”’#a { width: 200px; height: 200px; overflow: hidden; background-color: #cc4400; } #b { position: absolute; height: 100px; width: 200px; padding: 0; margin: 0; transform: translatey(200px); background-color: #404040; transition-property: all; transition-duration: 1s; } #c { position: absolute; width: inherit; height: inherit; margin: 0; } #a:hover > #b { transform: translatey(100px); background-color: 606060; }”’

https://wdtime.ru/css/overflow-css-perepolnenie-elementa

IOS safari scrolls not working. Here is the code below. Anybody knows what’s the problem.

Hey there , Thanks for this article but I wanna know how to visible overflow only for one side of an element, like only for top or left.

thanks a lot. very explanatory. i used it a couple times but couldnt get an explicit explantion. thanks once again

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Safari rounded outline issue

Hi guys! I have a problem with the outline in Safari. On my page in the form, I have an outline when you open the selector. This outline does not accept the rounded corners in safari. Can someone help me?

The link to the website: Website

hi @Noethi select border-radius: 2rem on selector__container if this doesn’t help (it should) you can add -webkit-border-radius: 2rem