Glitches when drawing border-radius in Windows 10
More recently, thousands of people who wanted to upgrade their PCs to a new version of Windows - 10. It seems like a good thing, the system is new, and the Edge browser, which will free developers from a lot of problems. But today in the morning they sent me a wonderful screenshot of one of my sites and I decided to figure out "what's what."
The photo was like this:
')
And it interested me, because there are no blocks of this color on the site. But there are green trees in the background.
I deployed Windows 10 in Virtualbox and saw a slightly different, but no less strange picture ...
The artifact is at the upper left corner of the menu and the background below the text.
I started randomly selecting sites, it turned out that border-radius is so odd, and the percentage of buggy jumps randomly, regardless of whether the block has a border, what is its background, etc. From the tag, too, clearly nothing depended, and only with the curves turned off everything was drawn as it should.
Along the way, I found strange artifacts on the SVG logo:
Unfortunately, I didn’t have a PC-laptop at hand, I’ll check it all at home once again on living hardware, but in Virtualbox the removal of the driver solved the problem with SVG and with roundings. What to do on a real hardware - apparently, wait for normal drivers for the video card. Or install them yourself. Apparently the drivers from Windows 8 are not 100% suitable, and almost all were updated from the old system. I feel that requests from customers on this topic will increase in the coming days.
After removing the driver:
And if someone doubts that this is my curve, this is a twitter screen from the same virtual machine:
UPD
The corpse hasLayout, holy hack, etc., as it was called in ancient times, rose from the dead!
On the "iron" laptop I caught the exact same glitch as they sent me. HD3000 graphics card. The problem was cured by removing the driver, but the resolution became poor and after the reboot it downloaded again. Immediately I tried the old method of treatment - in the best traditions of the Middle Ages:
And that's it! True, it did not work on all pages ...
Microsoft how so?
The photo was like this:
')
And it interested me, because there are no blocks of this color on the site. But there are green trees in the background.
I deployed Windows 10 in Virtualbox and saw a slightly different, but no less strange picture ...The artifact is at the upper left corner of the menu and the background below the text.
I started randomly selecting sites, it turned out that border-radius is so odd, and the percentage of buggy jumps randomly, regardless of whether the block has a border, what is its background, etc. From the tag, too, clearly nothing depended, and only with the curves turned off everything was drawn as it should.
Along the way, I found strange artifacts on the SVG logo:
Unfortunately, I didn’t have a PC-laptop at hand, I’ll check it all at home once again on living hardware, but in Virtualbox the removal of the driver solved the problem with SVG and with roundings. What to do on a real hardware - apparently, wait for normal drivers for the video card. Or install them yourself. Apparently the drivers from Windows 8 are not 100% suitable, and almost all were updated from the old system. I feel that requests from customers on this topic will increase in the coming days.
After removing the driver:
And if someone doubts that this is my curve, this is a twitter screen from the same virtual machine:
UPD
The corpse hasLayout, holy hack, etc., as it was called in ancient times, rose from the dead!
On the "iron" laptop I caught the exact same glitch as they sent me. HD3000 graphics card. The problem was cured by removing the driver, but the resolution became poor and after the reboot it downloaded again. Immediately I tried the old method of treatment - in the best traditions of the Middle Ages:
position:relative And that's it! True, it did not work on all pages ...
Microsoft how so?
Source: https://habr.com/ru/post/264705/
All Articles