# iOS 웹뷰에서 BottomSheet 사용시 배경이 옆으로 밀리는 현상

**URL:** https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594
**Category:** 개발
**Tags:** webview
**Created:** [12월 3, 2025, 9:00오전 UTC](https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594 "2025-12-03T09:00:25Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![dingchi](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@dingchi](https://techchat-apps-in-toss.toss.im/u/dingchi)
#### Post date: [12월 3, 2025, 9:00오전 UTC](https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594/1 "2025-12-03T09:00:26Z")

</div>

안녕하세요

**‘오늘의 분노 게이지’** 서비스를 운영하고 있는 개발자입니다.

이번에 사용자의 피드백을 입력받는 부분을 추가하려고 하는데, 다음과 같은 현상이 iOS에서 발견되어서 제보드립니다.

'BottomSheet’를 활용해서 모달을 띄우면, 뒤 배경 영역이 뒤로 밀리는 현상이 발생합니다.

Android에서는 해당 현상없는 것으로 확인했습니다.

확인 부탁드리겠습니다.

 ![image](https://canada1.discourse-cdn.com/flex007/uploads/toss/original/2X/6/6ce1db3048acd1ec7fb3b28b3cb1aada06b61700.jpeg)

---

<div class="post-metadata">

### Author: ![dingchi](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@dingchi](https://techchat-apps-in-toss.toss.im/u/dingchi)
#### Post date: [12월 3, 2025, 9:02오전 UTC](https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594/2 "2025-12-03T09:02:21Z")

</div>

라이브러리 버전은 최신 버전을 이용중입니다.

```
"@apps-in-toss/web-framework": "^1.5.1",
"@toss/tds-mobile": "^2.2.0",
"@toss/tds-mobile-ait": "^2.2.0",

```

---

<div class="post-metadata">

### Author: ![seonjeong](https://yyz1.discourse-cdn.com/flex007/user_avatar/techchat-apps-in-toss.toss.im/seonjeong/32/594_2.png) [@seonjeong](https://techchat-apps-in-toss.toss.im/u/seonjeong)
#### Post date: [12월 3, 2025, 9:20오전 UTC](https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594/3 "2025-12-03T09:20:11Z")

</div>

@dingchi 님 안녕하세요

제보 감사합니다. 내부 수정해보겠습니다.

---

<div class="post-metadata">

### Author: ![minsoo-web](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@minsoo-web](https://techchat-apps-in-toss.toss.im/u/minsoo-web)
#### Post date: [12월 3, 2025, 9:38오전 UTC](https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594/4 "2025-12-03T09:38:21Z")

</div>

안녕하세요, 혹시 문제가 발생한 ios 버전 (및 기기)을 확인해보고 싶습니다.  
또한 BottomSheet 컴포넌트를 띄우는 코드 부분을 확인해보고 싶어요.

---

<div class="post-metadata">

### Author: ![dingchi](https://avatars.discourse-cdn.com/v4/letter/d/c68b51/32.png) [@dingchi](https://techchat-apps-in-toss.toss.im/u/dingchi)
#### Post date: [12월 3, 2025, 9:45오전 UTC](https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594/5 "2025-12-03T09:45:11Z")

</div>

안녕하세요! iOS는 14, 15, 16 Pro, 17 Pro, 17 Pro Max에서 확인했습니다.

코드는 html 부분 공유드릴게요! 더 확인 필요한 부분 있으면 말씀해주세요.

```auto
<div
      style={{display: 'flex', flexDirection: 'column', height: '100dvh', ...backgroundStyle }}
  >
      <div style={{ display: 'flex', paddingTop: 20, marginRight: 20 }}>
          <Button 
              style={{color: '#4E5968', backgroundColor: "rgba(2, 23, 71, 0.05)", marginLeft: 'auto' }}
              size="small" 
              variant="weak"
              display="inline"
              onClick={() => setOpen(true)}
              >
              분노 산출 기준이 뭔가요?
          </Button>
      </div>
      <div style={{ display: 'flex', flex: 1, justifyContent: 'center' }}>
          <Lottie 
              style={{ 
                  width: "100%",
                  height: "auto",
                  maxHeight: "65dvh"
              }}
              animationData={currentConfig.animation} 
              loop={false} // 한 번만 재생
              onComplete={handleComplete}
              rendererSettings={{
                  preserveAspectRatio: platform == 'ios'
                  ? "xMidYMid slice" // ✅ 공백 제거, 꽉 채움
                  : "xMidYMid meet"
              }}
          />
      </div>
      <div 
          style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
          }}
      >
          <TextButton
              // style={{
              // width: 'calc(100% - 40px)', // 좌우 20px 여백
              // justifyContent: 'center',
              // }}
              size="medium"
              display="block"
              onClick={() => {
                  setIsOpen(true);
              }}
          >
              피드백 남기기
          </TextButton>

          <FixedBottomCTA.Double
              leftButton={
                  <CTAButton
                      color="primary"
                      variant="weak"
                      onClick={() => {
                          Analytics.click({button_click: "result_share"});
                          navigate("/measure");
                      }}
                  >
                      다시 측정하기
                  </CTAButton>
              }
              rightButton={
                  <CTAButton
                      color="primary"
                      onClick={shareClick}
                  >
                      공유하기
                  </CTAButton>
              }
          >
          </FixedBottomCTA.Double>
      </div>

      <BottomSheet
          // 문서를 위해 사용된 prop이에요.
          UNSAFE_disableFocusLock
          open={isOpen}
          onClose={() => setIsOpen(false)}
          header={<BottomSheet.Header>오늘 측정 결과, 어땠나요?</BottomSheet.Header>}
          // @here 이렇게 하단에 CTA를 넣을 수 있어요!
          cta={
              <BottomSheet.CTA 
                  onClick={sendFeedback} 
                  disabled={isDisabled}
                  loading={isLoading}
                  >
                  보내기
              </BottomSheet.CTA>
          }
      >
          <div style={{ position: 'relative' }}>
              <TextArea 
                  variant="box" 
                  minHeight="200px" 
                  placeholder="좋았던 점, 불편했던 점, 개선되었으면 하는 점을 자유롭게 알려주세요."
                  value={feedback}
                  onChange={handleTextChange}
                  maxLength={MAX_LENGTH}
                  style={{
                      paddingBottom: "20px"
                  }}
              />

              <Text
                  style={{
                      position: 'absolute',
                      bottom: '26px',
                      right: '41px',
                      fontSize: '14px'
                  }}
                  color={feedback.length >= MAX_LENGTH ? '#f44336' : colors.grey500}
                  typography="t6"
                  fontWeight="regular">
                  {feedback.length.toLocaleString()}/{MAX_LENGTH.toLocaleString()}
              </Text>
          </div>
      </BottomSheet>

      <AlertDialog
          open={open}
          title={<AlertDialog.Title>{'분노 게이지 산출 기준'}</AlertDialog.Title>}
          description={
          <AlertDialog.Description>
          {angerLevels.map((level, index) => (
              <div key={index}>
              <span style={{ color: level.dotColor }}>● </span> {level.text}
              </div>
          ))}
          </AlertDialog.Description>
          }
          alertButton={<AlertDialog.AlertButton onClick={() => setOpen(false)}>확인</AlertDialog.AlertButton>}
          onClose={() => setOpen(false)}
      />

      <AlertDialog
          open={feedbackTokenExpiredDialogOpen}
          description={
          <AlertDialog.Description>
              지금은 피드백 전송이 어려워요.{"\n"}처음부터 다시 진행해주세요.
          </AlertDialog.Description>
          }
          alertButton={<AlertDialog.AlertButton onClick={() => setFeedbackTokenExpiredDialogOpen(false)}>확인</AlertDialog.AlertButton>}
          onClose={() => setFeedbackTokenExpiredDialogOpen(false)}
      />

      <Toast 
          position="bottom"
          open={feedbackServerErrorToastOpen}
          text="잠시 후 다시 시도해주세요"
          leftAddon={
              <Asset.Icon
                  frameShape={{ width: 18 }}
                  name="icon-info-circle-mono"
                  color={adaptive.grey400}
                  aria-hidden={true}
              />
          }
          higherThanCTA
          duration={3000}
          onClose={() => setFeedbackServerErrorToastOpen(false)}
      />

      <Toast 
          position="bottom"
          open={feedbackSendSuccessToastOpen}
          text="피드백 전송을 완료했어요"
          leftAddon={
              <Asset.Icon
                  frameShape={{ width: 18 }}
                  name="icon-info-circle-mono"
                  color={adaptive.grey400}
                  aria-hidden={true}
              />
          }
          higherThanCTA
          duration={3000}
          onClose={() => setFeedbackSendSuccessToastOpen(false)}
      />
  </div>

```

---

<div class="post-metadata">

### Author: ![mingg](https://avatars.discourse-cdn.com/v4/letter/m/90ced4/32.png) [@mingg](https://techchat-apps-in-toss.toss.im/u/mingg)
#### Post date: [1월 13, 2026, 10:44오전 UTC](https://techchat-apps-in-toss.toss.im/t/ios-bottomsheet/1594/6 "2026-01-13T10:44:54Z")

</div>

안녕하세요. 저희도 ios 동일한 현상 발생하는데 혹시 수정하셨나요??