Safari中CSS动画时overflow:hidden不生效及页面适配问题问询

Hey there, let's break down your two issues and fix them step by step!

1. Safari中translate动画时overflow:hidden未生效 #

原因 #

Safari handles rendering contexts during CSS transform animations differently from Chrome. When an element moves via a translate animation, Safari elevates it to an independent hardware-accelerated rendering layer. If neither the parent container nor the element itself has explicit rendering context markers, the overflow:hidden clipping rule won't apply correctly during the animation—leaving the overlay visible until the animation finishes.

解决方案 #

You can force Safari to handle the rendering context properly with either of these methods:

• Add transform: translateZ(0) or will-change: transform to the parent container of the overlay and dog, triggering hardware acceleration and clarifying the rendering layer:

.dog-container { /* Replace with your actual parent container class */
  position: relative;
  overflow: hidden; /* Make sure the parent has overflow:hidden set */
  transform: translateZ(0); /* Trigger hardware acceleration */
}

• Or add backface-visibility: hidden directly to the overlay element to force the browser to calculate clipping correctly:

.dog-overlay { /* Replace with your actual overlay class */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: transform 0.3s ease;
  backface-visibility: hidden; /* Fix Safari rendering inconsistency */
}

Both approaches will make Safari apply overflow:hidden correctly during the animation, matching Chrome's behavior.

2. Window resize causes PROGRAMMA page background to disappear, boxing ring remains, and horizontal scroll is possible #

原因 #

This issue typically stems from problems with element width adaptation, container overflow settings, or background positioning/sizing:

• Background element doesn't adapt to width changes: If the background uses a fixed width (e.g., width: 1920px) or 100vw (which can have calculation delays on resize), it won't cover the new viewport width after resizing, making it appear to disappear.
• Parent container doesn't restrict horizontal overflow: The boxing ring element's width may exceed the viewport, and its parent container lacks overflow-x: hidden, causing a horizontal scrollbar.
• Background sizing/positioning issues: If the background uses background-size: contain or a fixed background-position, it might not fill the container after resizing.

解决方案 #

Follow these steps to troubleshoot and fix:

1. Ensure the background element adapts to width:
   Set the background element to use relative width, and make sure its parent container also uses full width:

.programma-background { /* Replace with your actual background class */
  width: 100%;
  min-width: 100%; /* Prevent width from shrinking below viewport */
  background-size: cover; /* Ensure the background image fills the container */
}

2. Restrict horizontal scrolling:
   Add overflow-x: hidden to the page root container or the PROGRAMMA page's parent container:

body, .programma-page-container { /* Replace with your actual page container class */
  overflow-x: hidden;
}

3. Limit the boxing ring's width:
   If the boxing ring shouldn't exceed the viewport, set a maximum width or restrict overflow on its parent:

.boxing-ring { /* Replace with your actual boxing ring class */
  max-width: 100%;
  overflow-x: hidden;
}

4. Force update on resize (optional):
   If CSS fixes don't work, use JavaScript to listen for resize events and manually update the background element's size:

// Run on page load and resize
function updateBackgroundSize() {
  const bgElement = document.querySelector('.programma-background');
  bgElement.style.width = `${document.body.clientWidth}px`;
}

window.addEventListener('resize', updateBackgroundSize);
updateBackgroundSize(); // Initialize on page load

内容的提问来源于stack exchange，提问作者Robbe Verhoest