Hey there, let's dig into this issue you're facing with your .sitebg class. First off, this kind of cross-browser rendering quirk is almost never a pure "browser bug"—it's far more likely that Safari handles CSS transform/background positioning logic differently than Firefox, especially when the window is resized and the browser has to recalculate element positions.

Common Causes & Fixes to Try #

• Explicitly Set transform-origin
  Safari can behave weirdly with the default transform-origin value (which is 50% 50% for most elements) when dealing with dynamically sized elements or positioned contexts. If your .sitebg is using absolute/fixed positioning, Safari might miscalculate the origin point during resize. Try explicitly defining it with concrete values, like:

  .sitebg {
    transform-origin: center center;
    -webkit-transform-origin: center center; /* Safari still appreciates prefixes for some transform props */
  }
  

  Also make sure the parent element has a clear positioning context (e.g., position: relative) so Safari doesn't inherit an unexpected origin.

• Separate Background Positioning from Transforms
  If you're combining background-position (especially percentage values) with transform (like scale/translate) on .sitebg, Safari might stack these calculations incorrectly during resize. Instead of relying on percentage-based background positions, try:

  • Using keyword values like background-position: center center
  • Switching to background-size: cover or contain for full-screen background adaption, which handles scaling more consistently across browsers
  • Avoiding transforms on the background element itself if possible—apply transforms to a child container instead, leaving the background element static.

• Fix Resize Redraw Timing
  Safari processes resize events and element redraws differently than Firefox. Sometimes, the browser lags in recalculating properties during resize, leading to jumps. You can force a smooth redraw by:

  • Adding transform: translateZ(0) to .sitebg to enable hardware acceleration (this helps Safari prioritize rendering the element)
  • Wrapping any resize-related JS updates in requestAnimationFrame to sync with the browser's repaint cycle

• Double-Check CSS Prefixes
  While modern Safari supports most unprefixed CSS properties, some transform-related features still benefit from -webkit- prefixes. Make sure you're including both prefixed and unprefixed versions for properties like transform, transform-origin, and background-size.

Example Fixed CSS for Reference #

Here's a robust version of a full-screen background class that should play nice in both Safari and Firefox:

.sitebg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('your-background-image.jpg');
  background-size: cover;
  background-position: center center;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  /* Optional: if you need a transform, include both prefixes */
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

Debugging Tip #

Fire up Safari's Developer Tools, go to the Rendering tab, and enable "Paint flashing". Watch what happens when you resize the window—if .sitebg is flashing erratically or redrawing in the wrong place, that's a clue that the browser is miscalculating its position during resize.

In almost all cases, this is a cross-browser compatibility issue that can be fixed with targeted CSS adjustments. If you've tried all the above and still see the jump, it might be a niche Safari bug—but that's pretty rare here.

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