preface

This post documented a conversation with Google engineers at the end of last year, hoping to provide a new approach to the problem.

background

It was November 26th last year. Remember it was a Thursday. Just finished changing the bug in hand I was ready to brush the boiling point, did not expect at this time the enterprise wechat flashed up, the mouse over, the instant back a cool, actually or “online problem feedback group” play the message, every time this group of a play the message, will let me have a kind of foreboding.



I shook with my right hand to open this message:





Many teachers reported that some formula symbols in the test paper, lesson plan and adding panel could not be displayed completely, resulting in the loss of these formula symbols after printing. This trend could lead to an INFORMATION system accident with feedback from other lines of business and departments.

​

The analysis reason

Because the testers had multiple versions of Chrome on their computers, analysis by test colleagues initially found that the problem did not occur in Chrome86 or later. The Chrome87 version of the browser, which was released just over a week ago, is 100 percent replicable.

Chrome87? Why does this sound so familiar? I seem to recall something, suddenly opened our [XIAO Front-end team] public account: I just last week, “XIAO Front-end Weekly 49” on the title of the words: “Chrome87 released, the biggest performance improvement in years!”





After comparing the display situation of other browsers and versions, it is almost certain that the problem is caused by the Chrome87 version upgrade.

“Warday, I write you hard our weekly headline, you incredibly pit me!”

To solve the process

While the problems caused by the browser upgrade were a headache for me, I was inspired by the company’s core values of customer success, innovation and teamwork. I had to figure it out!

To describe the problem briefly, our platform’s formula symbols are all in SVG. (-2, -3) is an SVG of the formula, and you can see that the minus sign “-” is not shown.



Try zooming the Chrome browser to a certain scale, and the formula symbol will appear normally. The following image can be displayed normally when magnified to 110%.



In view of the above situation, consider the following solutions

Plan a

  • How to do it: Try using CSS’s Transform and Zoom properties to enlarge the SVG images of all formula classes to a certain scale so that they can be displayed properly. Although this will cause some typographical problems, it can temporarily solve the symbol loss.
  • Disadvantages: However, it is found that the display proportion of the formula in different places is not uniform, and the specific magnification factor cannot be confirmed. For example, the zoom value in page A can be displayed normally when it is adjusted to 1.04, but in page B, it needs to be adjusted to 1.06. If it is uniformly adjusted to 1.06, other positions may not be displayed normally. (Magnification can only be limited to a certain range, not beyond a value can be unified display). If everything is changed separately, development costs are higher and tester regression pressure is greater.

Scheme 2

  • Practice: tidy up the description document to guide the teacher to downgrade the browser;
  • Disadvantages: The operation is too complicated, so all users need to uninstall the current Chrome and install the earlier version of the installation package we provide, and you need to consider to do the system configuration to prevent Chrome automatic upgrade.

Plan 3

  • How to do it: Use another browser, such as 360 or chrome with a kernel lower than version 87.
  • Disadvantages: The project has been only compatible with Chrome browser, temporary use of other browsers may cause greater risks, and the number of users is large, also uncertain the stability of this solution;

Final plan

Compared with the above plan, I found that the plan is a more feasible, just in my heart to call the company’s corporate vision: “to become a respected hundred years of education group”, and ready to achieve it and contribute to their own a sleepless night……

I had his eureka moment, since upgrading to cause our SVG display abnormal, the others must have seen similar problems, and then try to Google the Monorail issue tracking platform of Chromium project (bugs.chromium.org/p/chromium/…). I searched for the keyword “SVG”.

Well, I’m surprised to see that hundreds of SVG issues have been raised in the last week alone.



After reviewing other people’s bugs, most of them were not completely consistent with our situation, so I put forward an issue myself with a mindset of trying, explaining our situation and describing the browser version and other information. I got a quick response from the Google project people.



A member of the Chromium project asked me if I had “hardware acceleration” on and if the problem would be resolved if it was off. I did a search in the Settings



Sure enough, I turned it on, and after I turned it off and restarted the browser as he suggested, it did work. So I replied immediately and thanked him.



​

This configuration item is automatically enabled in the browser after upgrade 87, while this configuration item is disabled by default in the earlier version. In fact, hardware acceleration mode is probably a part of the work to the graphics card to complete, in order to reduce the CPU workload, and this processing process may produce problems and lead to this bug.

At this point, we immediately contacted colleagues in the information management department to compile a document to teach users to manually turn off the hardware acceleration mode and issued a notice. So far, it only took half a day from the discovery to the temporary solution of this problem.

Subsequent progress

At this moment, I finally relieved, but this problem was not completely solved: since we have many online exam scenarios, the failure to see the formula will greatly affect our students’ answer situation. Although manual configuration can be temporarily solved, it is still not very friendly.

At the suggestion of our boss, I explained to Google that we had a large number of users, that other browsers don’t have this problem (which is very important), and that it’s very unfriendly to have to manually turn it off. Google promised to fix it in stable 88.

And they did, with a stable version of Chrome88 released less than a month later.

Here is theIssue addressYou can have a look if you are interested.

conclusion

Imagine if we hadn’t gone to them for help. We went from evaluating the plan, to sorting out the scope, to developing, testing, and releasing. In this series of processes, there may not be enough time in a day, and there is a risk of leakage or other flagged problems. Browser upgrade caused problems is actually a common phenomenon, I hope you can encounter similar problems in the future can also try to some official developers feedback, in the process of communication you may have unexpected harvest (sometimes maybe your bug to others to change will be more stable).

Monorail issue tracking platform:bugs.chromium.org/.