Why is overflow-x:clip not working on mobile browser

Question

I wanted to crop my background on mobile phone so the user cant scroll horizontally, it works fine when i use responsive design mode on web browser :

But when i open it on my mobile phone , it shows like this :

I know this question have been asked many times, but none of the solutions seems work for me.

this is my code :

import React from "react"
import styled from "styled-components"

const HeroBackground = () => {
  return (
    <Wrapper>
      <Background src="/images/backgrounds/hero-background.svg" />
    </Wrapper>
  )
}

export default HeroBackground

const Wrapper = styled.div`
  position: relative;
  max-width: 1440px;
  margin: auto;
  overflow-x: clip !important;
`

const Background = styled.img`
  position: absolute;
  z-index: -1;
  @media (max-width: 480px) {
    max-width: 600px;
    height: auto;
  }
`

This is the link of my website in case if needed : https://trusting-bohr-a3f5b8.netlify.app/

Haymo

Answer 1

My guess is you are using Safari browser on an iphone, and according to Can I Use, clip is unfortunately not supported in Safari, hence the discrepancy you are seeing.

I tried messing around to see if I could achieve the effect you're looking for. One possible solution is to introduce one more wrapping div around the img.

const HeroBackground = () => {
  return (
    <Wrapper>
      <ImageWrapper>
        <Background src="/images/backgrounds/hero-background.svg" />
      </ImageWrapper>
    </Wrapper>
  )
}

export default HeroBackground

const Wrapper = styled.div`
  position: relative;
  max-width: 1440px;
  margin: auto;
  /* overflow-x: clip !important; ***cannot use!*** */
`

const ImageWrapper = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  max-width: 100vw;
  z-index: -1;
`

const Background = styled.img`
  /* position: absolute; ***remove*** */
  /* z-index: -1; ***remove*** */
  @media (max-width: 480px) {
    max-width: 600px;
    height: auto;
  }
`

There are three keys to this working:

• The additional wrapper div allows you to position the image statically so that it contributes to height. The div is therefore what becomes absolutely positioned.
• max-width: 100vw means the div will never be longer than the screen.
• And overflow: hidden means the image won't leak out of its constraining div.
  • Using hidden on Wrapper hides the entire image because it ends up with 0 height. This is why the extra div is introduced.

I also recommend investigating if there's a way to use your image as a background-image.

Crocidolite

Yes, the solution works! It was weird because i tested it on many devices including android phone but overflow-x clip seems not working too. Thanks for the solution ,although i still a little bit confused about the extra div. – Haymo

Still works perfectly. @BagusAmrullahFikri The extra div is so that overflow:clip can be turned off of the parent (the div that has the images currently sat in. and then the absolutely positioned div lets you move the content outside the parent. Overflow still works, but can now be hidden on the direct image wrapper, whilst allowing visible overflow on the parent) – Gradey

Answer 2

I'm having the same issue on IOS / Safari but I just noticed that Can I Use now shows that overflow: clip will be supported on Safari in IOS 16.0:)

That's something to consider from this point onwards before implementing workarounds to get this to work on IOS. It then all comes down to how many of your users are on older IOS versions in the future and how big the impact is of overflow: clip not working. In my case the impact is limited to some content highlighting sticking out further than intended on the older IOS versions, which is something I can live with.

Pyelitis

Is using overflow-x: hidden instead of overflow-x: clip an option for you? This is how I solved the issue for myself. I needed overflow-x: clip on larger screens, but for mobile devices overflow: hidden is sufficient so just shoved that in a media query. – Arnulfo

That might actually also work in some cases indeed! In my case there was a reason for not using "hidden" although it might also have solved the issue when using hidden only on mobile and clip on larger screens as you suggest. In my case though there are areas in the site where I need specifically clip even on mobile as I use it in combination with overflow-clip-margin , which is also a very useful property. – Pyelitis

Answer 3

I use this CSS class for overflow-x: clip:

.polyfill-overflow-x-clip {
  /* On Safari mobile browsers, overflow-x-clip is not supported */
  overflow-x: hidden;
  overflow-x: clip;
}

Hanahanae

This is not really a polyfill. When someone wants to use clip instead of hidden, they have a reason for it. – Tiphany

Sure, it is not 100% polyfill, but it defaults to hidden, which is better than defaulting to nothing when clip is not supported. – Hanahanae

Which can still break the layout and most probably will (by introducing scroll bars). I'd say that the only real solution is to use a wrapper. – Tiphany