Swiper: 3D Cube Effect - top-half of shadow disappeared when I am dragging it

[qiangbro]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 4.5
• Platform/Target and Browser Versions: CHROME
• Live Link or JSFiddle/Codepen or website with isssue: http://idangero.us/swiper/demos/230-effect-cube.html

What you did

drag from right to left

Expected Behavior

shadow always showing

Actual Behavior

top-half of shadow disappeared when I am dragging it

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow
for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[udidol]

+1 on this, this should be opened and addressed.
In general, the cube shadow works very badly in Chrome while it is perfect in Firefox.
The cube shadow system should be replaced with something that renders better in chrome...

[smbln]

Please fix it :)

[qiangbro]

过了一年多都没解决吗 bug缠身？坐等chrome修复？

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vltansky]

Moving blur & shadow to :before element seems like fixing the issue in chrome.
https://stackblitz.com/edit/swiper-demo-23-3d-cube-effect-cazhqo

.swiper-cube-shadow {
  -webkit-filter: initial !important;
  filter: initial !important;
  background: none !important;
}

.swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}

[qiangbro]

终于解决 感谢