There is an issue for the browsers listed in the table below, and in particular for the Google Chrome browser and its family. The issue is with the CSS clip-path property expressed by applying it on a pseudo-element with a given background color and attached absolute positioning to the edge of the parent element with the same background color as the pseudo-element. If we try to change the size of the available space for an element with a pseudo-element attached to its edge, for example, by changing the size of the common container, then in the dynamics of this change we will see small breaks in the docking of the pseudo-element expressed by translucency.
Google Chrome circled video of current behavior
Google Chrome screenshot of current behavior
Firefox circled video of expected behavior
Google Chrome screenshot of expected behavior
You can see an example live in one of the ways:
- Right in your browser at the link
- Open example at the Codesandbox
- By cloning and running this project on your computer
To see it live use the Github pages link https://andrew-dyachenko.github.io/chrome-vertical-line-break-effect-issue-for-clip-path-property/
To see it in sandbox and try to change the code use the Codesandbox link https://codesandbox.io/s/divine-butterfly-h0j94
Open your terminal and go to your sites directory or other suitable directory
cd ~/SitesClone the repository
git clone git@github.com:Andrew-Dyachenko/chrome-vertical-line-break-effect-issue-for-clip-path-property.gitGo to cloned repository
cd chrome-vertical-line-break-effect-issue-for-clip-path-property/Install dependencies
npm iStart the project with command start OR with parcel-start command if you need live reload on a change events
npm run startOR with live reload
npm run parcel-startmacOS Clone & Run example
| Software | Version(s) | Issue exist |
|---|---|---|
| Firefox | 🍏 91.0.1 (64-bit) | ✅ No |
| Google Chrome | 🍏 92.0.4515.159 (Official build), (x86_64) | |
| Microsoft Edge | 💻 91.0.864.67 (Official build), (64-bit) | |
| Opera | 🍏 78.0.4093.147 (x86_64) | |
| Safari | 🍏 14.1.2 (16611.3.10.1.6) | ✅ No |
| Yandex browser | 🍏 21.6.0.1108 (64-bit) |
| Operating system(s) | Version(s) |
|---|---|
| 🍏 macOS Big Sur | 11.5.2 (20G95) |
| 💻 Windows 10 Pro | 1909 (18363.836) |
I have not tested the same issue with horizontal lines, I hope soon a browser developers will check and fix this issue and at the same time will check the horizontal case if it exists. Reported Chrome (Chromium) issue is also published here.
If you went to the Github pages with an example and do not see this issue, then most likely the browser developers have already fixed this issue. Let's rejoice! Yay!