Scrollbar - remove margin/padding properties properly (#35388)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js
index 187a6694dc17f722bdad123db320124f0f3479bb..b81d4b2372fb2111875f2d22bb2d200c2136eda9 100644 (file)
--- a/js/src/util/scrollbar.js
+++ b/js/src/util/scrollbar.js
@@ -15,8 +15,8 @@ import { isElement } from './index'
 
 const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
 const SELECTOR_STICKY_CONTENT = '.sticky-top'
-const PROPERTY_PADDING = 'paddingRight'
-const PROPERTY_MARGIN = 'marginRight'
+const PROPERTY_PADDING = 'padding-right'
+const PROPERTY_MARGIN = 'margin-right'
 
 /**
  * Class definition
@@ -69,15 +69,15 @@ class ScrollBarHelper {
       }
 
       this._saveInitialAttribute(element, styleProp)
-      const calculatedValue = window.getComputedStyle(element)[styleProp]
-      element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
+      const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProp)
+      element.style.setProperty(styleProp, `${callback(Number.parseFloat(calculatedValue))}px`)
     }
 
     this._applyManipulationCallback(selector, manipulationCallBack)
   }
 
   _saveInitialAttribute(element, styleProp) {
-    const actualValue = element.style[styleProp]
+    const actualValue = element.style.getPropertyValue(styleProp)
     if (actualValue) {
       Manipulator.setDataAttribute(element, styleProp, actualValue)
     }
@@ -86,13 +86,14 @@ class ScrollBarHelper {
   _resetElementAttributes(selector, styleProp) {
     const manipulationCallBack = element => {
       const value = Manipulator.getDataAttribute(element, styleProp)
-      if (typeof value === 'undefined') {
+      // We only want to remove the property if the value is `null`; the value can also be zero
+      if (value === null) {
         element.style.removeProperty(styleProp)
         return
       }
 
       Manipulator.removeDataAttribute(element, styleProp)
-      element.style[styleProp] = value
+      element.style.setProperty(styleProp, value)
     }
 
     this._applyManipulationCallback(selector, manipulationCallBack)