I have a div with style overflow:hidden and white-space:nowrap. Then a button that scrolls the div left via scrollLeft += 50. Works fine until I add scroll-behavior:smooth to the CSS of the div. Then it doesn't scroll at all in Safari 15.4. On all other browsers I have tested it works fine. Some ignore the smooth scrolling but it doesn't break the scrolling. In Safari it breaks the scrolling. I have setup a simple test page for this error scrolling test. What am I doing wrong? If this is a bug in Safari any ideas for workarounds?
This is a bug as of Safari 15.4.
Previously, it didn't support smooth scrolling and would scroll instantly. Since the new update, they have introduced an incomplete version of smooth scrolling, the scrollbar is required to be visible for it to work.
The current workarounds are to either use a scrolling library, making your own version/polyfill or checking useragent and give it a version without smooth scrolling if it's Safari.
WebKit Bugzilla Link: https://bugs.webkit.org/show_bug.cgi?id=238497
Related
I am trying to implement an overlay with a fullscreen images below each other. It needs to scroll. But scrolling does not work in Safari. It works in Chrome/Firefox. I have only tested the newest versions.
Have tried to make the demo simpler, removing ImageSrcset but it does not help.
Codesandbox (please open the browser in new window/tab to see problem):
https://codesandbox.io/s/github/secretlifeof/react-overlay-images/tree/master/?fontsize=14
Github repo:
https://github.com/secretlifeof/react-overlay-images
Do I need to implement scroll lock so that the underlay does not try to scroll? I have tried to look at how others have implemented overlays, but I cannot understand how this implementation is different.
Versions:
Safari: v12.1.2
I've got shadow scrollable elements whose scrolling is linked to the scroll offsets of other elements: https://henrybuilt.github.io/react-sticky-table/
For some reason, I can't get them to appear in Safari on OSX when scrollbars are set to always show. Modifying the z-index after page-load using the dev controls appears to affect them, but not consistently. The scrollbars render just fine in other browsers.
What is causing this rendering issue and how can I fix it?
The code : http://jsfiddle.net/YM5Cb/
Please take look at the fiddle.
I am trying out webkit models. I was experimenting with horizontal box layout.
See the top right panel, its height is more than its parent.
How to make its height same height as its parent
The above demo works only in chrome and safari. I am learning to create HTML 5 apps for android and ios device. Thats why i am using webkit. So its enough for the code to work on chrome and safari, so it will work fine in ios and android devices
maybe you can try to set the property height:auto for child boxes/divs
i use css3pie for my page to use css3 effects in the ie browsers.
Everything works fine. But now i have a field on my page that has a horizintal scrollbar.
In ie8 everything works finde. But in ie7 i cant scroll dragging the scrollbar. I can only use the arrows on the left and right.
and in ie9 i cant scroll.. i also cant drag the scrollbar. but if i click on the arrows on the left and right the scrolling element directly jumps to the left back..
i use pie v1.0beta5
i found that issue on many sites but there was no solution that works for me..
i have a wrapper arount my page that has a linear gradient background.. if i remove that everything works fine.. but with the gradient background i cant scroll in ie7 and ie9..
does anyone have the same problem and maybe found a solution for this problem?
nevermind, it seems you have to add the -pie-track-active:false to all ancestor elements that use a PIE behavior
I'm having a really frustrating issue with Firefox. I just rolled out an update to my site at socwall.com, and all of the browsers look great, except for this one issue with Firefox:
Firefox is rendering a white border along the top and left edges of my fixed position header. Strangely enough, if I hover over the element in Firebug and then hover away, the issue is fixed:
Is this something I need to bring up with the Firefox team, or am I doing something wrong?
Which version of Firefox are you using?
Are you using any custom Firefox theme?
I am on Beta Channel with recent beta version 9 and as you can see in the attached screen-shot, I don't have it.
Try using outline: 0 in your CSS.