[251026] fix: ProductAllSection QR이미지 구형 브라우저 호환성

🕐 커밋 시간: 2025. 10. 26. 08:11:49

📊 변경 통계:
  • 총 파일: 2개

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less

@@ -317,6 +317,30 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+
+  // Chrome 68 호환성: QR 코드 컨테이너 크기 보장
+  .qrcode {
+    > div:first-child {
+      // 명시적으로 크기 고정 및 오버플로우 처리
+      width: 240px !important;
+      height: 240px !important;
+      max-width: 240px !important;
+      max-height: 240px !important;
+      min-width: 240px !important;
+      min-height: 240px !important;
+      overflow: hidden;
+      box-sizing: border-box;
+
+      // 내부 canvas/img 크기 조정
+      canvas, img {
+        width: 100% !important;
+        height: 100% !important;
+        display: block !important;
+        object-fit: contain;
+      }
+    }
+  }
+
   .qrRollingWrap {
     display: flex;
     flex-wrap: wrap;

com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less

@@ -24,8 +24,29 @@
     padding: 10px;
     border-radius: 4px;
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    // Chrome 68 호환성: 명시적 크기 설정
+    box-sizing: border-box;
+
+    // 화살표가 QR 코드를 가리지 않도록 z-index 조정
+    z-index: 2;
   }
   .tooltipBody {
+    position: relative;
+    width: 100%;
+    height: 44px;
+    font-size: 20px;
+    line-height: 22px;
+    letter-spacing: -1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // Chrome 68 호환성: 화살표 위치 및 크기 명시적 설정
     &::before {
       border: 15px solid transparent;
       border-bottom-color: #000;
@@ -34,10 +55,11 @@
       position: absolute;
       top: -28px;
       z-index: 1;
+
+      // Chrome 68 호환성
+      width: 0;
+      height: 0;
+      display: block;
     }
-    height: 44px;
-    font-size: 20px;
-    line-height: 22px;
-    letter-spacing: -1px;
   }
 }