Everybody is good! Write an article for the first time, do not have what experience, according to the MD writing mode force to write to everyone step on the pit of the process, programmer write a running account type article or very happy.

First, find the problem.

In the morning of 2021-2-3, I found that there was a problem in the round broadcast on the page of “Shuying Award”, the text became blurred in the scrolling process and the font was not correct, as shown in Figure 1:

The original effect looks like this, as shown in Figure 2:

I’m sure you can see the difference. Clearly the text in Figure 2 is clearer than in Figure 1, and the font is not distorted.

Two, think about the problem, check the bug.

Why is that? Our code hasn’t even been touched. That’s weird!

3. X is an old version, and the official website is already in the era of 6.x. Besides, the way of writing the code in 3.x, 4.x and later versions is completely different.

3. Examples of x

var swiper = new Swiper('#kv_swiper', { effect: 'fade', pagination: '.swiper-pagination', paginationClickable: true, spaceBetween: 0, centeredSlides: true, autoplay: 4000, roundLengths:true, speed:800, loop:true }); $('#kv_swiper'). Mouseover (function() {swiper.stopautoplay (); }) $('#kv_swiper').mouseout(function() { swiper.startAutoplay(); })Copy the code

4. Instantiation after X:

Var mySwiper = new Swiper('. Swiper-container ', {autoplay:true,// same as the following Settings /*autoplay: {delay: 3000, stopOnLastSlide: false, disableOnInteraction: true, },*/ pagination: { el: '. Swiper-pagination ', clickable :true,}, on:{autoplayStart:function(){$("# showhTML ").html('. }, autoplayStop: function () {$(" # showhtml "). The HTML (' shut down automatically switches'); }}});Copy the code

This version is impossible, because the site is too many rounds are written in accordance with the old version, and there has been no problem, if this is changed, compressed JS, CSS have to change again, maybe there will be more bugs.

Then, just check to see if it’s a browser problem.

Because a few days ago it looked good, suddenly changed, maybe the browser automatically updated?

As a front-end programmer, it’s impossible to test without installing several major browsers, remember the old IETester? Haha, I deleted it a long time ago. Figure 3 is the browser on my computer (360 is not installed, everyone knows the truth) :

Test by test and find different problems. Safari, Chrome and Firefox are blurry and problematic, IE and Surf are fine. I don’t know what I’m talking about. What the hell! Is IE better than BI?

Check the browser version (don’t ask me why I only look at these three browsers, because they smell good).

Chrome :

Safari(Mac test more reliable):

Firefox:

Boy, they’re all up to date.

Brainwave, quickly find a computer, asked him not to update Chrome, tested it, found no problem, perfect display.

Last but not least, if you update your browser and your browser is buggy, you may have a problem with your code. If Swiper is still using 3.x, you may have noticed the problem and fixed it perfectly.

Third, solve the Bug.

(a) Change the version number. Change the latest 6.x version of Swiper. The result is unexpected, but there is still a problem with fuzzy deformation.

Inner OS: Is it too new?

(b) Change 4. X to the earliest version 4.0, there should be no problem this time. Hit the street again, or paste.

Inner OS: do you want to carry it out separately and write a demo to test it?

(c), extract code, write demo, all versions together, I throw, all is paste, I want to collapse, for this demo, before and after spent an hour.

Inner OS: Is it the wrong direction? See if anyone else has this problem?

(D) Baidu search, Github look at the problems of predecessors, and even Stack Overflow.

Enlightening, find the questions raised by these three peers respectively:

  • When swiper is used to scroll up and down, the text inside will be blurred. Thank you
  • When swiper scrolls up, there will be blur, double shadow and a little shake. What is the reason?
  • Too much swiper content causes blurred fonts and pictures

One useful piece of information:

roundLengths : true, 
Copy the code

// If set to true, the width and height of slide are rounded (rounded) to prevent blurring of text or borders on the screen at some resolutions. For example, if you set slidesPerView: 3 you might have a slide width of 341.33px, then open the roundLengths and take the integer 341px.

I’m looking forward to it. No matter it’s official, or the demo I wrote, it’s still a mess

Just as I was about to give up, I ran out and had a cigarette.

I was inspired by a reply from CSDN, which went like this:

  • Because there is a decimal point in the translate3D value of the swiper-wrapper container, math.round () is used to round the value.

I can’t change the Swiper library file, I don’t have the ability.

But I know CSS. Maybe transform did it?

(e), press F12 to open the page element detection interface and see the following screen:

What the hell is this? Can’t read it?

Transform: translate3D (-44016px, 0px, 0px); transform: translate3d(-44016px, 0px, 0px)

Try changing it to stop it from rolling:

transform: translate3d(0, 0, 0) ! important; // Oh my God, it is not blurred, ok, but it is not moving

How to do?

Did you notice the pinch of CSS I circled in the upper right corner of the image at this point?

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}
Copy the code

Swiper-container -android. Swiper-slide. Swiper-slide. Is that why?

I tried to throw my demo into android for testing, and the result was no problem, very clear.

Here’s the key. Change this CSS to:

.swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}
Copy the code

Or you can write a separate CSS reset:

#kv_swiper .swiper-slide
{
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}
Copy the code

All problems, regardless of version, regardless of browser, return to normal, that is, the bug is fixed!

Tips:RoundLengths: true, this property is best added to avoid the trouble of decimal points if you want to show full screen rotations.

Four,

In my opinion, this problem is caused by CSS Transform, as shown in the figure below:

Parent box “swiper-wrapper”, initially reset XYZ triaxis to origin (0,0,0); Then change the value of the X-axis to make the parent box scroll, but in fact, the child box “swiper-slide” should be reset to the original point, so that you do not move, but some browsers, the result is that the child box is also moving; So you have to leave the box where it is, and you have this android CSS: “.swiper-container-android.swiper-slide,”

Today I encountered this problem, also because the system browser automatic update only found; The only way to understand it is that the code I wrote was a bit buggy, and the browser was constantly being updated; We can’t stop the iteration of technology, we can only find problems and try to solve them.

Write in the last: hope to step on the pit of small partners useful, if not, don’t spray me, after all, programmers to write a so-called manuscript is really not easy, understand long live; We can communicate, there are better solutions, also welcome to discuss in the comments section, very grateful! I wish you all, write code without bugs!