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

user_7789086 0
Viewed 3117

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 :

enter image description here

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

enter image description here

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/

styled-components reactjs css html
2 Answers

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.

user_61630660

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.

user_154715850
Related