[Solved] overflow hidden not working in webkit as it works in firefox/IE

[yadwinder]

Hello Guys,

please help me to fix this weird issue. please visit my demo page:

http://html5coder.net/tinycircleslider/

I worked around a circle slider give a new look as I did at my link.

I have an issue related to overflow hidden in webkit browsers-chrome/safari.

I’m able to click only on Central, trending, deals, TV Shows. but not the others properly due to overflow of image slides.

Thanks,
Yadi

[yadwinder]

thanks for reply. but now you can see that image links are not working due to low z-index than parent element.

[yadwinder]

please check now.

if I use low z-index for .viewport, all circular link works, but images href doesn’t. because this way outer circle has higer z-index.

[yadwinder]

No, its not working.please try to make z-index like 1000, then image links will not work. images are pointing to another link.

[yadwinder]

how t I edit and share your codepen with you?

[yadwinder]

I added links to image, and increased z-index. Now you can see the issue while you try to click on CHANNELS, slider will not work due to overflow of inner image circle.

http://codepen.io/yadwinderpalsingh/pen/dorewO

[yadwinder]

let me know you that actual working:

slider outer circle links are set to change image slide.

but an image links to open a new page/alert.

Now, I set .viewport z-index to 0. image links are working fine this way. but not able to change slides by clicking CHANNELS on outer circle due to overflow of viewport.

you got my point now?

http://codepen.io/yadwinderpalsingh/pen/dorewO

[Shikkediel]

I notice it as well (Windows 7) but I think you could solve it by adding pointer-events: none to the unsorted list.

Edit – sorry, never mind that since you’d need them for the link…

[Shikkediel]

Misfire again… it’s pretty odd.

The trouble starts at the list item, .viewport itself is not ‘leaking’ pointer events outside the border-radius.

[yadwinder]

Hello guys,

still not found any fix for this. I wasted my last full day on this. please find something solid and tricky to fix this.

I think it is working fine for MAC users @Atelierbram, but not for windows users and even its not working on iphones.

[Shikkediel]

Changing the following will make it work as expected :

• Giving .overview relative positioning
• Adding border-radius: 50% to li and img
• Removing display: block from img

I think it’s a remnant of a long lasting bug…

[yadwinder]

@Shikkediel

mind-blowing! you saved my day. It works fine for me.

thanks a lot.

[Shikkediel]

No problem, it was too tempting to not give up on it. Such a neat design doesn’t deserve a browser glitch. Very nice work.

[Shikkediel]

I wouldn’t recommend anyone to add a slider to their page but I’ll make an exception for this one.

B-)

[Author]

Posts