क्रोम ब्राउज़र में टेक्स्ट रेंडर करने में समस्या है, अगर बॉडी में स्क्रॉल है तो बग काम करें (99% साइट्स में आमतौर पर, मेरा भी होता है)। मैं केवल स्थिति बदलता हूं, लेकिन टेक्स्ट ठीक से काम नहीं करता है, इसे कैसे ठीक करें?

$('#button').on('click', function() {
  $('.block').toggleClass('fixed');
});
body {
  height: 5000px;
  margin: 0;
  font-family: sans-serif;
}

.block {
  position: static;
  top: 0;
  left: 0;
  width: 80%;
  padding: 30px;
  font-size: 18px;
  color: red;
  background-color: #03121b;
}

.fixed {
  position: fixed;
}

h1 {
  margin: 0;
}

button {
  position: absolute;
  left: 30px;
  bottom: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block fixed">
  <h1>Some text blurred</h1>
</div>

<button id="button">toggle .block{ position: fixed; }</button>
0
Jack London 26 अक्टूबर 2019, 13:56

1 उत्तर

सबसे बढ़िया उत्तर
transform: translate3d(0,0,0);

इस प्रॉपर्टी को .block चाइल्ड एलिमेंट में जोड़ें इस बग को ठीक कर देगा।

0
Jack London 27 अक्टूबर 2019, 08:00